JS實(shí)現(xiàn)十分鐘倒計(jì)時代碼實(shí)例

2019-11-19 12:41:02

字體：大中小

供稿：網(wǎng)友

編寫JS倒計(jì)時代碼需要用到很多JavaScript知識，比如：if函數(shù)，Math.floor，定時器setInterval等等，如有不清楚的小伙伴可以參考PHP中文網(wǎng)的相關(guān)文章，或者訪問 JavaScript視頻教程。

舉例：10分鐘考試倒計(jì)時，當(dāng)時間僅剩五分鐘時，提醒考試僅剩5分鐘，時間結(jié)束時，提示考試結(jié)束。具體代碼如下：

HTML部分：

<body> <div id="timer"></div> <div id="warring"></div></body>

JavaScript部分：

<script type="text/javascript"> var maxtime = 10 * 60; //       function CountDown() {        if (maxtime >= 0) {          minutes = Math.floor(maxtime / 60);          seconds = Math.floor(maxtime % 60);          msg = "距離結(jié)束還有" + minutes + "分" + seconds + "秒";          document.all["timer"].innerHTML = msg;          if (maxtime == 5 * 60)alert("距離結(jié)束僅剩5分鐘");            --maxtime;        } else{          clearInterval(timer);          alert("時間到，結(jié)束!");        }      }      timer = setInterval("CountDown()", 1000);    </script>

JS十分鐘倒計(jì)時代碼的具體步驟：

1、設(shè)置考試時長maxtime = 10 * 60秒，即10分鐘

2、用if函數(shù)判斷，當(dāng)maxtime大于等于零時，判斷剩余分和秒

3、再用if函數(shù)判斷，當(dāng)時間僅剩5分鐘時，彈出提示：距離結(jié)束僅剩5分鐘

4、如果時間到，則清除定時器，提示：結(jié)束

效果如圖所示：