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

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

Пример:

---

Download Files

Please wait..

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

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

<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 class="download-btn" href="#">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 class="manualDownload-link" href="">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 !important;

  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: 0.9em;

  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 КОД:

<script type="text/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 <span>" + timeLeft + "</span> seconds."; //for quick start of countdown

      var downloadTimer = setInterval(function timeCount(){

        timeLeft -= 1;

        countdown.innerHTML = "Download will begin automatically in <span>" + timeLeft + "</span> 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);

    });

    </script>