Question

我正在为html和JavaScript中的项目制作一个测验游戏。在每个问题上，玩家有15秒的回答时间。我设法这样做：

<body onload="setTimeout(Timer,15000)">

然后在Js：

function Timer()
    {
         alert("You are out of time!");
    }

但是，我希望能够显示玩家在<p>标记中剩余的时间。我怎么能这样做？

Answer 1

<div id="count">Start</div>

var count = 15;
var interval = setInterval(function(){
  document.getElementById('count').innerHTML=count;
  count--;
  if (count === 0){
    clearInterval(interval);
    document.getElementById('count').innerHTML='Done';
    // or...
    alert("You're out of time!");
  }
}, 1000);

Answer 2

这是倒数计时器的基本示例

var count = 15;
var timer = setInterval(function() {
  console.log(count);
  count--;
  if(count === 0) {
    stopInterval()
  }
}, 1000);

var stopInterval = function() {
  console.log('time is up!');
  clearInterval(timer);
}

Repl：https://repl.it/I2C6

Answer 3

使用超时时间（以秒为单位）初始化变量'sec'。调用setInterval（）有2个参数，第一个是方法名，第二个参数是调用第一个参数中提到的方法之间的间隔。

var sec = 15;
var time = setInterval(myTimer, 1000);

function myTimer() {
    document.getElementById('timer').innerHTML = sec + "sec left";
    sec--;
    if (sec == -1) {
        clearInterval(time);
        alert("Time out!! :(");
    }
}

Time : <span id="timer"></span>

测验的JavaScript计时器

3 个答案: