首頁 >web前端 >js教程 >JS如何實現分鐘倒數（十分鐘倒數實例）

JS如何實現分鐘倒數（十分鐘倒數實例）

yulia原創: 2018-10-17 17:20:3021013瀏覽

工作中經常需要在頁面中設定倒數計時，那你知道JS如何實現分鐘倒數嗎？這篇文章和大家分享一個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、如果時間到，則清除定時器，提示：結束

效果如圖所示：

JS如何實現分鐘倒數（十分鐘倒數實例）

以上給大家分享了一個JS倒數十分鐘的程式碼，步驟很詳細，容易理解，初學者可以自己嘗試，看看能不能達到倒數計時的效果，希望這篇文章對你有幫助！

以上是JS如何實現分鐘倒數（十分鐘倒數實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：用javascript求兩個字串最大的相同的子字串（程式碼實例）下一篇：用javascript求兩個字串最大的相同的子字串（程式碼實例）

看更多