JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)代碼實(shí)例
編寫JS倒計(jì)時(shí)代碼需要用到很多JavaScript知識,比如: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é)束
效果如圖所示:
- JS 倒計(jì)時(shí)實(shí)現(xiàn)代碼(時(shí)、分,秒)
- JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- 簡單易用的倒計(jì)時(shí)js代碼
- 2種簡單的js倒計(jì)時(shí)方式
- 原生JS實(shí)現(xiàn)簡單的倒計(jì)時(shí)功能示例
- js幾秒以后倒計(jì)時(shí)跳轉(zhuǎn)示例
- 最全面的JS倒計(jì)時(shí)代碼
- Javascript倒計(jì)時(shí)代碼
- JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例
相關(guān)文章
input type=file 選擇圖片并且實(shí)現(xiàn)預(yù)覽效果的實(shí)例
下面小編就為大家?guī)硪黄猧nput type=file 選擇圖片并且實(shí)現(xiàn)預(yù)覽效果的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10JavaScript ES2019中的8個(gè)新特性詳解
這篇文章主要介紹了JavaScript ES2019中的8個(gè)新特性詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02Flow之一個(gè)新的Javascript靜態(tài)類型檢查器
今天我們興奮的發(fā)布了 Flow 的嘗鮮版,一個(gè)新的Javascript靜態(tài)類型檢查器。Flow為Javascript添加了靜態(tài)類型檢查,以提高開發(fā)效率和代碼質(zhì)量,本文給大家分享Flow之一個(gè)新的Javascript靜態(tài)類型檢查器,感興趣的朋友一起學(xué)習(xí)吧2015-12-12js設(shè)計(jì)模式之代理模式及訂閱發(fā)布模式實(shí)例詳解
這篇文章主要介紹了js設(shè)計(jì)模式之代理模式及訂閱發(fā)布模式,結(jié)合實(shí)例形式詳細(xì)分析了代理模式及訂閱發(fā)布模式的概念、原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08