Question

我正在尝试创建一个小型JavaScript计时器，其中用户只有有限的时间来回答问题，如果用户没有及时回答，他们将被定向回主页面。从计时器方面来说，我从代码中回来的只是字面意思＆＃34; []＆＃34;。

我的代码：

    <DOCTYPE! html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style_q1.css">

<script type="text/javascript">

var time="60";
var min="0";
var sec="0";

function startTimer() {
      min=parseInt(timer/60);
      sec=parseInt(timer%60);

      if(timer<1){

        window.location="index.html";

      }

      document.getElementById("time").innerHTML = "<b> Time Left: </b>"+min.toString()+":"+sec.toString();
      timer--;
      setTimeout(function(){
      startTimer();
      }, 1000) ;
}

</script>


</head>

<body onload="startTimer();">

  <div id="top">


  </div>


  <div id="logo">

<h1 style="color:white;"> Question 1 -  Geography </h1>

  </div>

  <div id="game_area">

 <center>  <h2> What is the capital of Ireland? </h2> </center>



  </div>


  <div id="time">

      <center> <b>[<span id="time" ></span></b>]</center>

  </div>

  </body>

  </html>

Answer 1

只需使用setInterval()，它就是为此而设计的：

更新：请记住在时间结束时停止setinterval进程。使用此方法clearInterval()来停止该过程。

＆＃13;

var secondsLeft = 60;

function startTimer() {
      var min=parseInt(secondsLeft/60);
      var sec=parseInt(secondsLeft%60);

      if(secondsLeft<1){
        alert('timer expired');

        //window.location="index.html";

      }

      document.getElementById("time").innerHTML = "<b> Time Left: </b>"+min.toString()+":"+sec.toString();
      secondsLeft--;
}

setInterval(startTimer, 1000);

＆＃13;

<DOCTYPE! html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="style_q1.css">
</head>

<body onload="startTimer();">

  <div id="top">


  </div>


  <div id="logo">

    <h1 style="color:white;"> Question 1 -  Geography </h1>

  </div>

  <div id="game_area">

 <center>  <h2> What is the capital of Ireland? </h2> </center>



  </div>
  <div id="time">

      <center> <b>[<span id="time" ></span></b>]</center>

  </div>

  </body>

  </html>

＆＃13;

Answer 2

拼写错误

将时间重命名为计时器

<data name="DocuSign_WelcomeDialogHideEmailContent">true</data>

Answer 3

有几点需要注意：

<!DOCTYPE>代替<DOCTYPE!>
id属性应该是唯一的，你有两个声明的
<center>已弃用。使用CSS找到解决方案。

我建议您在文档中添加onload事件监听器，而不是向<body>添加DOMContentLoaded属性。

<link rel="stylesheet" type="text/css" href="style_q1.css">

<script type="text/javascript">

    function startTimer() {
        min = parseInt(timer / 60);
        sec = parseInt(timer % 60);

        if (timer < 1) {
            window.location = "index.html";
        }

        document.getElementById("time").innerHTML = "<b> Time Left: </b>" + min.toString() + ":" + sec.toString();
        timer--;
        setTimeout(function () {
            startTimer();
        }, 1000);
    }

    var timer = 60,
        min = 0,
        sec = 0;

    document.addEventListener('DOMContentLoaded', function () {
        startTimer();
    });
</script>

问题1 - 地理

爱尔兰的首都是什么？

[]

Answer 4

您的代码在变量time
您可以使用setInterval来完成您的方案。
请记住在时间结束时停止setinterval过程。

var timer = 10;
var min = 0;
var sec = 0;
var refreshIntervalId;

function startTimer() {
      min=parseInt(timer / 60);
      sec=parseInt(timer % 60);

      if (timer < 1) {
        //window.location="index.html";
        console.log("Time is up!");
        
        clearInterval(refreshIntervalId);
        
        return;
      }

      document.getElementById("time").innerHTML = "<b> Time Left: </b>" + min + ":" + sec;
      
      timer--;
}

var refreshIntervalId = setInterval(startTimer, 1000);

<div id="top">
  </div>
  <div id="logo">
<h1 style="color:white;"> Question 1 -  Geography </h1>
  </div>
  <div id="game_area">
 <center>  <h2> What is the capital of Ireland? </h2> </center>
  </div>
  <div id="time">
  <center> <b>[<span id="time" ></span></b>]</center>
</div>

希望有所帮助！

我的JavaScript计时器不起作用

4 个答案:

爱尔兰的首都是什么？