JavaScript頁面倒計時功能完整示例
本文實(shí)例講述了JavaScript頁面倒計時功能。分享給大家供大家參考,具體如下:
效果圖:
源碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.dbjr.com.cn JS倒計時</title> <style> h3{text-align:center;line-height:50px;height:50px;margin-top:100px;} #timer{text-align:center;} </style> </head> <body> <h3>倒計時</h3> <p id="timer">00:00:00</p> <script> var timeObj=document.getElementById("timer"); // var startTime=new Date(); // startTime=startTime.getTime(); // var endTime="2017-4-20 19:30:00"; // endTime=new Date(endTime.replace(/-/g,'/')).getTime(); // var diffTime = endTime-startTime; var diffTime=400000; //-----------------------------------倒計時start-------------------------------- function timeBack(){ var timer = setInterval(function(){ if(diffTime>=1000){ diffTime -= 1000; timeObj.innerHTML = formatDate(diffTime); } },1000) } timeBack(); function formatDate(maxtime) { var d = Math.floor(maxtime / (1000 * 60 * 60 * 24)); var h = Math.floor(maxtime / (1000*3600)) - (d * 24); var m = Math.floor(maxtime / (1000*60)) - (d * 24 *60) - (h * 60); var s = Math.floor(maxtime / (1000)) - (d * 24 *60*60) - (h * 60 * 60) - (m*60); var hour=(d*24)+h,minutes=m,seconds=s; if(hour>100){ hour=99 } if(hour < 10){ hour="0"+hour; } if (m < 10 ) { minutes = "0"+minutes }if(s <10){ seconds = "0"+seconds; } return hour+":"+minutes+":"+seconds; } </script> </body> </html>
感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
PS:這里再為大家推薦幾款時間及日期相關(guān)工具供大家參考使用:
在線秒表工具:
http://tools.jb51.net/bianmin/miaobiao
在線日期/天數(shù)計算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數(shù)計算器:
http://tools.jb51.net/jisuanqi/datecalc
Unix時間戳(timestamp)轉(zhuǎn)換工具:
http://tools.jb51.net/code/unixtime
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JS實(shí)現(xiàn)倒計時(天數(shù)、時、分、秒)
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計時
- 2種簡單的js倒計時方式
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計時效果
- 一個不錯的js html頁面倒計時可精確到秒
- Javascript實(shí)現(xiàn)商品秒殺倒計時(時間與服務(wù)器時間同步)
- 原生JS實(shí)現(xiàn)簡單的倒計時功能示例
- javascript秒數(shù)倒計時自動跳轉(zhuǎn)代碼
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計時效果
- 團(tuán)購、定時搶購倒計時js版
- js實(shí)現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運(yùn)行時間功能的代碼3例
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊(duì)列鏈表代碼分析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊(duì)列鏈表代碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12淺談javascript中的數(shù)據(jù)類型轉(zhuǎn)換
本文主要對javascript中的數(shù)據(jù)類型轉(zhuǎn)換進(jìn)行介紹,具有一定的參考價值,下面跟著小編一起來看下吧2016-12-12JavaScript cookie與session的使用及區(qū)別深入探究
這篇文章主要介紹了Java中Cookie和Session詳解,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-10-10深入理解requestAnimationFrame的動畫循環(huán)
這篇文章先給大家介紹了什么是requestAnimationFrame,而后才深入講述關(guān)于requestAnimationFrame的動畫循環(huán),文章介紹的非常詳細(xì),相信對大家學(xué)習(xí)requestAnimationFrame具有一定的參考借鑒價值,有需要的朋友下面來一起看看吧。2016-09-09JavaScript實(shí)現(xiàn)自定義拖拽排序列表
在Web開發(fā)中,拖拽排序是一個常見的需求,它允許用戶通過拖拽的方式重新排列列表項(xiàng)的順序,本文將介紹如何使用原生JavaScript實(shí)現(xiàn)這一功能,需要的可以了解下2024-01-01解決uni-app報錯Error:?read?EBADF?at?Pipe?.?onStreamRead...
這篇文章主要介紹了uni-app報錯Error:?read?EBADF?at?Pipe?.?onStreamRead...解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Javascript iframe交互并兼容各種瀏覽器的解決方法
這篇文章主要介紹了Javascript iframe交互并兼容各種瀏覽器的解決方法的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07