В ы узнаете, как создать кнопки загрузки для веб-сайта с таймером обратного отсчета для автоматической загрузки файлов с помощью HTML, CSS и ванильного Javascript. Эта задача выполняется только с использованием ванильного javascript. Добавление такой кнопки загрузки для загрузки файлов с таймером обратного отсчета очень полезно для любого блога или веб-сайта во многих отношениях. Надеюсь, это видео будет полезным.
Для отображения иконок добавьте:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
Пример кнопки:
Стиль html:
<div class="download-container">
<a href="#" class="download-btn">Download Files <i class="fas fa-download"></i></a>
<div class="countdown"></div>
<div class="pleaseWait-text">Please wait..</div>
<div class="manualDownload-text">
If the download didn't start automatically, <a href="" class="manualDownload-link">click here./a>
</div>
</div>
Стиль css:
.download-container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.download-btn{
position: relative;
background: #4285F4;
color: #fff;
width: 260px;
padding: 18px 0;
text-align: center;
font-size: 1.3em;
font-weight: 400;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
transition: background 0.3s ease;
}
.download-btn:hover{
background: #2874F3;
}
.download-btn i{
margin-left: 5px;
}
.countdown{
font-size: 1.5em;
font-weight: 700;
margin-bottom: 20px;
}
.countdown span{
color: #0693F6;
font-size: 1.5em;
font-weight: 800;
}
.pleaseWait-text{
font-size: 1.1em;
font-weight: 600;
display: none;
}
.manualDownload-text{
font-size: 1.1em;
font-weight: 600;
display: none;
}
.manualDownload-link{
color: #0693F6;
font-weight: 800;
text-decoration: none;
}
Стиль javascript:
const downloadBtn = document.querySelector(".download-btn");
const countdown = document.querySelector(".countdown");
const pleaseWaitText = document.querySelector(".pleaseWait-text");
const manualDownloadText = document.querySelector(".manualDownload-text");
const manualDownloadLink = document.querySelector(".manualDownload-link");
var timeLeft = 10;
downloadBtn.addEventListener("click", () => {
downloadBtn.style.display = "none";
countdown.innerHTML = "Download will begin automatically in " + timeLeft + " seconds."; //for quick start of countdown
var downloadTimer = setInterval(function timeCount(){
timeLeft -= 1;
countdown.innerHTML = "Download will begin automatically in " + timeLeft + " seconds.";
if(timeLeft <= 0){
clearInterval(downloadTimer);
pleaseWaitText.style.display = "block";
let download_href = ""; //enter the downloadable file link URL here
window.location.href = download_href;
manualDownloadLink.href = download_href;
setTimeout(() => {
pleaseWaitText.style.display = "none";
manualDownloadText.style.display = "block";
}, 4000);
}
}, 1000);
});