我的JavaScript計時器不起作用
[英]My JavaScript timer doesn't work
問題描述
我試圖創建一個小的JavaScript計時器，其中用戶有有限的時間來回答問題，如果用戶沒有及時回答，他們將被引導回到主頁。 就計時器而言，我從代碼中得到的所有內容實際上都是“ []”。
我的代碼：
<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>
4 個解決方案
解決方案1
1 2018-01-17 18:59:31
只需使用setInterval() ，它就是為此而設計的：
更新：請記住在時間到時停止setinterval過程。 使用此方法clearInterval()停止進程。
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);
<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>
解決方案2
0 2018-01-17 19:00:35
拼寫錯誤
將時間重命名為計時器
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_q1.css">
<script type="text/javascript">
var timer="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>
<body onload="startTimer();">
<div id="time">
<center> <b>[<span id="time" ></span></b>]</center>
</div>
</body>
</html>
解決方案3
0 已采納 2018-01-17 19:09:08
注意事項：
-
<!DOCTYPE>而不是<DOCTYPE!> - id屬性應該是唯一的，您必須聲明兩個
- 已棄用
<center>。 使用CSS查找解決方案。 與其向您的
<body>添加onload屬性，不建議向您的文檔添加一個DOMContentLoaded事件偵聽器。
問題1-地理<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>愛爾蘭的首都是什么？
[ ]
解決方案4
0 2018-01-17 19:27:23
- 您的代碼的可變
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記分板上暫停計時器不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.