JS實(shí)現(xiàn)秒殺倒計(jì)時特效
本文實(shí)例為大家分享了JS實(shí)現(xiàn)秒殺倒計(jì)時特效的具體代碼,供大家參考,具體內(nèi)容如下
知識點(diǎn)
添加一個定時器,對時間標(biāo)簽不斷進(jìn)行更新設(shè)置即可。
引入工具庫工具庫
運(yùn)行效果

代碼
引入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é)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript小組件 原生table排序表格腳本(兼容ie firefox opera chrome)
javascript小組件 原生table排序表格腳本 兼容ie firefox opera chrome,需要的朋友可以參考下2012-07-07
JS如何判斷是否為ie瀏覽器的方法(包括IE10、IE11在內(nèi))
這篇文章主要介紹了JS如何判斷是否為ie瀏覽器的方法(包括IE10、IE11在內(nèi)),需要的朋友可以參考下2015-12-12
event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別?event.clientX返回事件發(fā)生時,mouse相對于客戶窗口的X坐標(biāo) event.X也一樣但是如果設(shè)置事件對象的定位屬性值為relative2011-10-10
JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了javascript針對頁面dom元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
使用JavaScript實(shí)現(xiàn)node.js中的path.join方法
Node.JS中的 path.join 非常方便,能直接按相對或絕對合并路徑,有時侯前端也需要這種方法,如何實(shí)現(xiàn)呢?感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下2016-05-05
js實(shí)現(xiàn)帶三角符的手風(fēng)琴效果
本文主要介紹了js實(shí)現(xiàn)帶三角符手風(fēng)琴效果的實(shí)例。具有很好的參考價值,下面跟著小編一起來看下吧2017-03-03

