快捷導(dǎo)航

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

更新時(shí)間：2018年10月18日 08:36:39 投稿：laozhang

在本篇文章里我們給大家分享了關(guān)于JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)的相關(guān)實(shí)例代碼，有需要的朋友們可以學(xué)習(xí)下。

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

舉例：10分鐘考試倒計(jì)時(shí)，當(dāng)時(shí)間僅剩五分鐘時(shí)，提醒考試僅剩5分鐘，時(shí)間結(jié)束時(shí)，提示考試結(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("時(shí)間到，結(jié)束!");
        }
      }
      timer = setInterval("CountDown()", 1000);   
 </script>

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

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

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

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

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

效果如圖所示：

您可能感興趣的文章:

相關(guān)文章

JavaScript判斷手機(jī)號(hào)運(yùn)營商是移動(dòng)、聯(lián)通、電信還是其他(代碼簡單)
本文由腳本之家小編給大家分享的基于js判斷手機(jī)號(hào)運(yùn)行商是移動(dòng)、聯(lián)通、電信還是其他的，然后根據(jù)不同的運(yùn)營商做出對(duì)應(yīng)的處理，感興趣的朋友一起學(xué)習(xí)吧
2015-09-09
從對(duì)象列表中獲取一個(gè)對(duì)象的方法,依據(jù)關(guān)鍵字和值
下面小編就為大家?guī)硪黄獜膶?duì)象列表中獲取一個(gè)對(duì)象的方法,依據(jù)關(guān)鍵字和值。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
URLSearchParams快速解析URL查詢參數(shù)實(shí)現(xiàn)
這篇文章主要為大家介紹了URLSearchParams快速解析URL查詢參數(shù)實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
js滑動(dòng)提示效果代碼分享
這篇文章主要為大家分享了js滑動(dòng)提示效果代碼，實(shí)現(xiàn)方法簡單，感興趣的小伙伴們可以參考一下
2016-03-03
javascript基礎(chǔ)練習(xí)之翻轉(zhuǎn)字符串與回文
最近在學(xué)習(xí)的時(shí)候到了基礎(chǔ)算法這一章節(jié)，讓我對(duì)js內(nèi)置對(duì)象方法的掌握還有思維邏輯都得到了提升，所借此機(jī)會(huì)來寫一寫學(xué)習(xí)心得和總結(jié)。下面這篇文章主要介紹了利用javascript實(shí)現(xiàn)翻轉(zhuǎn)字符串與回文的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
JS數(shù)組方法concat()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法concat()用法,結(jié)合實(shí)例形式分析了JS數(shù)組concat()方法具體功能、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-01-01
詳解JavaScript正則表達(dá)式之分組匹配及反向引用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式之分組匹配及反向引用的相關(guān)資料,需要的朋友可以參考下
2016-03-03
js實(shí)現(xiàn)上傳圖片到服務(wù)器
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片到服務(wù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
js利用FileReader實(shí)現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像
本文主要介紹了js利用FileReader實(shí)現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12