Создайте простой 10-секундный обратный отсчет

Мне нужна строка, в которой говорится:

Your download will begin in (10, 9, 8, etc. Beginning on page load) seconds.

У меня уже есть 10-секундный текст для загрузки, и я просмотрел другие записи stackoverflow. Все они включают CSS и JQuery. Я бы хотел просто Javascript/HTML-таймер.

Никаких других запросов не было сделано для простой строки, в которой говорится: "Загрузка начнется через x секунд". Как мне это сделать?

Ответ 1

В JavaScript встроена функция с именем setInterval, которая принимает два аргумента - функцию, callback и целое число, timeout. При вызове setInterval будет вызывать функцию, которую вы даете ему каждые timeout миллисекунды.

Например, если вы хотите создавать окно предупреждения каждые 500 миллисекунд, вы можете сделать что-то вроде этого.

function makeAlert(){ 
    alert("Popup window!");
};

setInterval(makeAlert, 500);

Однако вам не нужно называть свою функцию или объявлять ее отдельно. Вместо этого вы можете определить встроенную функцию, например, так.

setInterval(function(){ alert("Popup window!"); }, 500);

После вызова setInterval он будет работать до тех пор, пока вы не вызовете clearInterval для возвращаемого значения. Это означает, что предыдущий пример будет работать бесконечно. Мы можем собрать всю эту информацию вместе, чтобы создать индикатор выполнения, который будет обновляться каждую секунду, а через 10 секунд прекратит обновление.

var timeleft = 10;
var downloadTimer = setInterval(function(){
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
  }
}, 1000);

<progress value="0" max="10" id="progressBar"></progress>

Ответ 2

Это делается в тексте.

<p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p>

<script type="text/javascript">
    var timeleft = 10;
    var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0)
        clearInterval(downloadTimer);
    },1000);
</script>

Ответ 3

Решение, использующее Promises, включает в себя как индикатор выполнения, так и обратный отсчет текста.

ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert('Page has started: ${value}.'));

function ProgressCountdown(timeleft, bar, text) {
  return new Promise((resolve, reject) => {
    var countdownTimer = setInterval(() => {
      timeleft--;

      document.getElementById(bar).value = timeleft;
      document.getElementById(text).textContent = timeleft;

      if (timeleft <= 0) {
        clearInterval(countdownTimer);
        resolve(true);
      }
    }, 1000);
  });
}

<div class="row begin-countdown">
  <div class="col-md-12 text-center">
    <progress value="10" max="10" id="pageBeginCountdown"></progress>
    <p> Begining in <span id="pageBeginCountdownText">10 </span> seconds</p>
  </div>
</div>

Ответ 4

Чтобы настроить таргетинг на кнопку загрузки через 10 секунд:

<p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p>

<script type="text/javascript">
    var timeleft = 10;
    var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0)
        clearInterval(downloadTimer);
    },1000);
</script>