Кнопка Загрузки С Таймером Обратного Отсчета + Автоматическая Загрузка Файлов (Button Countdown Timer)

Всем привет! В ы узнаете, как создать кнопки загрузки для веб-сайта с таймером обратного отсчета для автоматической загрузки файлов с помощью HTML, CSS и ванильного Javascript. Эта задача выполняется только с использованием ванильного javascript. Добавление такой кнопки загрузки для загрузки файлов с таймером обратного отсчета очень полезно для любого блога или веб-сайта во многих отношениях. Надеюсь, это видео будет полезным. 

Для отображения иконок добавьте:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

Пример:

Download Files

Please wait..

If the download didn't start automatically, click here.

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); });