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

Question

我想要一行内容:

您的下载将在(10、9、8 等。从页面加载开始)秒后开始。

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

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

Answer 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(){
  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>