溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS如何動態顯示倒計時效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS如何動態顯示倒計時效果”這篇文章吧。
1.頁面布局
<h2 id="show">距離2020年元旦還有：<span></span>天<span></span>小時<span></span>分<span></span>秒</h2>
2.js動態顯示
getTime()獲得設定的時期與1970年1月1日時間相差的毫秒數
1）獲得插入數字的位置
var show=document.getElementById("show").getElementsByTagName("span");2）聲明現在的時間和未來的時間
var timeing=new Date(); var time=new Date(2020,0,1,0,0,0);
3）獲得兩個時間差
var num=time.getTime()-timeing.getTime();
4）計算天數(24小時60分鐘60秒*1000毫秒) parseInt()取整
var day=parseInt(num/(24*60*60*1000));
5)獲得去除天數后剩余的毫秒數
num=num%(24*60*60*1000);
6)計算小時和獲得去除小時后剩余的毫秒數
var hour=parseInt(num/(60*60*1000)); num=num%(60*60*1000);
7）計算分鐘和獲得去除分鐘后剩余的毫秒數
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>
<h2 id="show">距離2020年元旦還有：<span></span>天<span></span>小時<span></span>分<span></span>秒</h2>
<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>以上是“JS如何動態顯示倒計時效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
