JS動態(tài)顯示倒計時效果

1.頁面布局
<h1 id="show">距離2020年元旦還有:<span></span>天<span></span>小時<span></span>分<span></span>秒</h1>
2.js動態(tài)顯示
getTime()獲得設定的時期與1970年1月1日時間相差的毫秒數(shù)
1)獲得插入數(shù)字的位置
var show=document.getElementById("show").getElementsByTagName("span");
2)聲明現(xiàn)在的時間和未來的時間
var timeing=new Date(); var time=new Date(2020,0,1,0,0,0);
3)獲得兩個時間差
var num=time.getTime()-timeing.getTime();
4)計算天數(shù)(24小時60分鐘60秒*1000毫秒) parseInt()取整
var day=parseInt(num/(24*60*60*1000));
5)獲得去除天數(shù)后剩余的毫秒數(shù)
num=num%(24*60*60*1000);
6)計算小時和獲得去除小時后剩余的毫秒數(shù)
var hour=parseInt(num/(60*60*1000)); num=num%(60*60*1000);
7)計算分鐘和獲得去除分鐘后剩余的毫秒數(shù)
var minute=parseInt(num/(60*1000)); num=num%(60*1000);
8)計算秒
var seconde=parseInt(num/1000);
9)頁面上顯示
show[0].innerHTML=day;
show[1].innerHTML=hour;
show[2].innerHTML=minute;
show[3].innerHTML=seconde;
10)設置定時器每一秒獲取一次新的時間
3.源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="show">距離2020年元旦還有:<span></span>天<span></span>小時<span></span>分<span></span>秒</h1>
<script>
var show=document.getElementById("show").getElementsByTagName("span");
setInterval(function(){
var timeing=new Date();
var time=new Date(2020,0,1,0,0,0);
var num=time.getTime()-timeing.getTime();
var day=parseInt(num/(24*60*60*1000));
num=num%(24*60*60*1000);
var hour=parseInt(num/(60*60*1000));
num=num%(60*60*1000);
var minute=parseInt(num/(60*1000));
num=num%(60*1000);
var seconde=parseInt(num/1000);
show[0].innerHTML=day;
show[1].innerHTML=hour;
show[2].innerHTML=minute;
show[3].innerHTML=seconde;
},100)
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的JS動態(tài)顯示倒計時效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關文章
JavaScript中實現(xiàn)最高效的數(shù)組亂序方法
這篇文章主要介紹了JavaScript中實現(xiàn)最高效的數(shù)組亂序方法,數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂,需要的朋友可以參考下2014-10-10
微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解
這篇文章主要介紹了微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JavaScript實戰(zhàn)之帶收放動畫效果的導航菜單
這篇文章主要為大家詳細介紹了JavaScript實戰(zhàn)之帶收放動畫效果的導航菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08
javascript代碼在ie8里報錯 document.getElementById(...) 為空或不是對象的解決方
今天更升級了ie8,發(fā)現(xiàn)原來在ie7下可以運行的代碼,不能運行了,發(fā)現(xiàn)了一些細節(jié),附臨時修改辦法。2009-11-11

