JS實現(xiàn)秒殺倒計時特效
更新時間:2020年01月02日 08:32:27 作者:KaiSarH
這篇文章主要為大家詳細介紹了JS實現(xiàn)秒殺倒計時特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)秒殺倒計時特效的具體代碼,供大家參考,具體內(nèi)容如下
知識點
添加一個定時器,對時間標簽不斷進行更新設(shè)置即可。
引入工具庫工具庫
運行效果
代碼
引入MyTool.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ font-size: 30px; } span{ background-color: #000; color: #fff; border-radius: 10px; padding: 0 5px; } </style> </head> <body> <div id="box"> <span>00</span>:<span>00</span>:<span>00</span> </div> <script src="../00MyTools/MyTools.js"></script> <script> window.addEventListener('load',function (ev) { var hour = myTool.$('box').children[0], min = myTool.$('box').children[1], sec = myTool.$('box').children[2]; var time = 8 * 60 * 60; var timer = setInterval(function () { time--; hour.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).hour); min.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).min); sec.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).second); if (time===0){ clearInterval(timer); } },1000); },false); </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript小組件 原生table排序表格腳本(兼容ie firefox opera chrome)
javascript小組件 原生table排序表格腳本 兼容ie firefox opera chrome,需要的朋友可以參考下2012-07-07JS如何判斷是否為ie瀏覽器的方法(包括IE10、IE11在內(nèi))
這篇文章主要介紹了JS如何判斷是否為ie瀏覽器的方法(包括IE10、IE11在內(nèi)),需要的朋友可以參考下2015-12-12event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別?event.clientX返回事件發(fā)生時,mouse相對于客戶窗口的X坐標 event.X也一樣但是如果設(shè)置事件對象的定位屬性值為relative2011-10-10使用JavaScript實現(xiàn)node.js中的path.join方法
Node.JS中的 path.join 非常方便,能直接按相對或絕對合并路徑,有時侯前端也需要這種方法,如何實現(xiàn)呢?感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下2016-05-05