您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何在js中實現簡單的時分秒倒計時效果,代碼簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
效果:
javascript:
<script type="text/javascript"> function countTime() { //獲取當前時間 var date = new Date(); var now = date.getTime(); //設置截止時間 var endDate = new Date("2018-10-25 00:00:00"); var end = endDate.getTime(); //時間差 var differTime = end - now; //定義變量,h,m,s保存倒計時的時間 var h, m, s; if (differTime >= 0) { h = Math.floor(differTime / 1000 / 60 / 60); m = Math.floor(differTime / 1000 / 60 % 60); s = Math.floor(differTime / 1000 % 60); h = h < 10 ? ("0" + h) : h; m = m < 10 ? ("0" + m) : m; s = s < 10 ? ("0" + s) : s; document.getElementById("_h").innerHTML = h + "時"; document.getElementById("_m").innerHTML = m + "分"; document.getElementById("_s").innerHTML = s + "秒"; setTimeout(countTime, 1000); } else { document.getElementById("_h").innerHTML = "00時"; document.getElementById("_m").innerHTML = "00分"; document.getElementById("_s").innerHTML = "00秒"; } } </script>
HTML:
<body onload="countTime()"> <p class="timer"> <span id="_h"></span> <span id="_m"></span> <span id="_s"></span> </p> </body>
上述內容就是如何在js中實現簡單的時分秒倒計時效果,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。