How TO - JavaScript 倒計時器
學習如何使用 JavaScript 建立一個倒計時器。
自己動手試一試 »
建立一個倒計時器
示例
<!-- 在一個元素中顯示倒計時器 -->
<p id="demo"></p>
<script>
// 設定我們倒計時的日期
var countDownDate = new Date("Jan 5, 2030 15:37:25").getTime();
// 每隔 1 秒更新一次倒計時
var x = setInterval(function() {
// 獲取今天的日期和時間
var now = new Date().getTime();
// 找出當前時間和倒計時日期之間的距離
var distance = countDownDate - now;
// 天、小時、分鐘和秒的時間計算
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 在 id="demo" 的元素中顯示結果
document.getElementById("demo").innerHTML = days + "天 " + hours + "小時 "
+ minutes + "分鐘 " + seconds + "秒 ";
// 如果倒計時結束,寫一些文字
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "已過期";
}
}, 1000);
</script>
自己動手試一試 »
提示:在我們的 JavaScript 參考中瞭解更多關於 window.setInterval() 方法的資訊。