JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
功能介紹:
1.時(shí)/分/秒倒計(jì)時(shí)直至為零
所有代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒計(jì)時(shí)</title> <style type="text/css"> *{ margin:0; padding:0; } span{ display: inline-block; width: 60px; height: 60px; border-radius: 50%; background: black; color: white; font-size: 30px; text-align: center; line-height: 60px; } i{ font-style: normal; font-size: 20px; } </style> </head> <body> <span id="hs">1</span> <i>:</i> <span id="ms">59</span> <i>:</i> <span id="ss">47</span> </body> </html> <script type="text/javascript"> //倒計(jì)時(shí) var count = 1; var Counter; function countDown(){ //調(diào)用 Counter = setInterval(f,1000); } countDown(); //自運(yùn)行 //倒計(jì)時(shí) function f(){ var hs = Number(document.getElementById("hs").innerHTML); var ms = Number(document.getElementById("ms").innerHTML); var ss = Number(document.getElementById("ss").innerHTML); if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){ var hs = document.getElementById("hs").innerHTML = "00"; var ms = document.getElementById("ms").innerHTML = "00"; var ss = document.getElementById("ss").innerHTML = "00"; clearInterval(Counter); console.log(count); return; } if(ss>0){ ss--; document.getElementById("ss").innerHTML = ss; count++; } if(ss==0){ if(ms>0){ ms--; document.getElementById("ms").innerHTML = ms; document.getElementById("ss").innerHTML = 59; } } if(ms==0){ if(hs>0){ hs--; document.getElementById("hs").innerHTML = hs; document.getElementById("ms").innerHTML = 59; } } } </script>
更多JavaScript時(shí)鐘特效點(diǎn)擊查看:JavaScript時(shí)鐘特效專題
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS秒殺倒計(jì)時(shí)功能完整實(shí)例【使用jQuery3.1.1】
- js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時(shí)用法示例
- javascript時(shí)間排序算法實(shí)現(xiàn)活動(dòng)秒殺倒計(jì)時(shí)效果
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
- C#結(jié)合JavaScript實(shí)現(xiàn)秒殺倒計(jì)時(shí)的方法
- javascript 實(shí)現(xiàn) 秒殺,團(tuán)購 倒計(jì)時(shí)展示的記錄 分享
- js實(shí)現(xiàn)倒計(jì)時(shí)秒殺效果
相關(guān)文章
JS中定時(shí)器的使用及頁面切換時(shí)定時(shí)器無法清除問題的解決辦法
定時(shí)器相信大家應(yīng)該都不陌生,下面這篇文章主要給大家介紹了關(guān)于JS中定時(shí)器的使用及頁面切換時(shí)定時(shí)器無法清除問題的解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02值得分享和收藏的xmlplus組件學(xué)習(xí)教程
值得分享和收藏的xmlplus組件學(xué)習(xí)教程,xmlplus是一個(gè)設(shè)計(jì)非常獨(dú)特 JavaScript 框架,用于快速開發(fā)前后端項(xiàng)目,感興趣的小伙伴們可以參考一下2017-05-05JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的實(shí)例代碼
這篇文章主要是對JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的實(shí)例代碼進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11HTML+JS實(shí)現(xiàn)監(jiān)控切屏功能
這篇文章主要介紹了如何利用HTML和JavaScript實(shí)現(xiàn)監(jiān)控切屏功能,監(jiān)控是否離開當(dāng)前頁面,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-03-03微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解
這篇文章主要介紹了微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09