创建一个简单的 10 秒倒计时

我想要一行这样写的：

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

我已经设置了 10 秒下载文本，并且我还查看了其他 stackoverflow 帖子。它们都包括 CSS 和 Jquery。我想要一个 Javascript/HTML 计时器。

没有其他请求要求简单的一行声明“您的下载将在 x 秒后开始”。我该怎么做？

JavaScript 内置了一个名为setInterval，它有两个参数 - 一个函数，callback和一个整数，timeout。当被召唤时，setInterval会调用你给它的函数timeout毫秒。

例如，如果您想每 500 毫秒创建一个警报窗口，您可以这样做。

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

setInterval(makeAlert, 500);

但是，您不必命名函数或单独声明它。相反，您可以内联定义函数，如下所示。

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

Once setInterval被调用，它将运行直到您调用clearInterval关于返回值。这意味着前面的示例将无限运行。我们可以将所有这些信息放在一起制作一个进度条，每秒更新一次，10 秒后停止更新。

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

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

或者，这将创建一个文本倒计时。

var timeleft = 10;
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);

<div id="countdown"></div>