JS實現十分鐘倒計時代碼實例

 更新時間:2018年10月18日 08:36:39   投稿:laozhang   我要評論

在本篇文章里我們給大家分享了關于JS實現十分鐘倒計時的相關實例代碼,有需要的朋友們可以學習下。

編寫JS倒計時代碼需要用到很多JavaScript知識,比如:if函數,Math.floor,定時器setInterval等等,如有不清楚的小伙伴可以參考PHP中文網的相關文章,或者訪問 JavaScript視頻教程。

舉例:10分鐘考試倒計時,當時間僅剩五分鐘時,提醒考試僅剩5分鐘,時間結束時,提示考試結束。具體代碼如下:

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 = "距離結束還有" + minutes + "分" + seconds + "秒";
          document.all["timer"].innerHTML = msg;
          if (maxtime == 5 * 60)alert("距離結束僅剩5分鐘");
            --maxtime;
        } else{
          clearInterval(timer);
          alert("時間到,結束!");
        }
      }
      timer = setInterval("CountDown()", 1000);   
 </script>

JS十分鐘倒計時代碼的具體步驟:

1、設置考試時長maxtime = 10 * 60秒,即10分鐘

2、用if函數判斷,當maxtime大于等于零時,判斷剩余分和秒

3、再用if函數判斷,當時間僅剩5分鐘時,彈出提示:距離結束僅剩5分鐘

4、如果時間到,則清除定時器,提示:結束

效果如圖所示:

相關文章

最新評論

辽宁35选7开奖结果