設計一個答題的小游戲，每道題可以有20秒時間作答，超過時間就要給出相應的提醒，由于20秒時間太長，不適合做GIF動態圖，下面來看一下我寫的5秒倒計時的測試程序結果：
一、主體程序
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>手寫倒計時程序</title> <link rel="stylesheet" type="text/css" href="css/layout.css"/> </head> <body> <section class="countDown"> <span id="countDownTime"></span> <section class="clear"></section> </section> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/layout.js" type="text/javascript" charset="utf-8"></script> </body></html>
二、CSS樣式
*{ margin: 0; padding:0;}html{ font-size: 12px;}.countDown{ width: 3.8rem; text-align: center; margin: 2rem auto 0 auto;}.countDown #countDownTime{ font-size: 2rem;}三、Jquery程序
先來說一下倒計時的原理：
1、將時間轉為0:0格式
2、需要開啟一個定時器，每隔1000ms就讓時間自動減1
3、判斷時間是否為0，如果為0則代表計時結束，此時需要給出提示或者做其他事情
下面來看具體實現的倒計時程序：
$(function(){ var countDownTime=parseInt(5); //在這里設置每道題的答題時長 function countDown(countDownTime){ var timer=setInterval(function(){ if(countDownTime>=0){ showTime(countDownTime); countDownTime--; }else{ clearInterval(timer); alert("計時結束,給出提示"); } },1000); } countDown(countDownTime); function showTime(countDownTime){ //這段是計算分和秒的具體數 var minute=Math.floor(countDownTime/60); var second=countDownTime-minute*60; $("#countDownTime").text(minute+":"+second); }})帶著我寫的原理再去看這段JS程序估計比較容易吧，希望對小伙伴有幫助。
新聞熱點
疑難解答
