JavaScript 的實時時間是指在網頁上顯示的當前時間,當用戶打開或刷新網頁時,JavaScript 可以獲取并顯示當前的時分秒。實時時間在很多情況下都具有很大的作用,比如各類計時器、時鐘、倒計時等,它們都需要顯示當前實時時間。
在 JavaScript 中,我們可以使用 Date() 對象獲取當前時間。例如:
var currentTime = new Date(); document.getElementById("time").innerHTML = currentTime.toLocaleTimeString();
在上面的代碼中,我們使用 Date() 對象獲取了當前時間,并通過 innerHTML 將時間寫入了 HTML 中的 id 為 "time" 的元素中。其中 toLocaleTimeString() 是一種 JavaScript 方法,可以將時間按照本地時間格式轉換成字符串。我們再來看一個例子:
function realTime() { var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); hours = checkTime(hours); minutes = checkTime(minutes); seconds = checkTime(seconds); document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds; var t = setTimeout(realTime, 1000); } function checkTime(i) { if (i< 10) {i = "0" + i}; // 少于 10 的數字前面加上一個 "0" return i; } realTime();
這段代碼會在頁面加載時調用 realTime() 方法,然后每隔一秒鐘更新一次時間,拼接成了一個完整的時間字符串,并寫入了 HTML 中的 id 為 "time" 的元素中。我們還引入了 checkTime() 方法,可以將時間轉換成兩位數格式。
JavaScript 的實時時間還可以用于實現倒計時效果。例如,我們可以計算出一個特定時間點和當前時間相差的時間,然后倒計時到該時間點。下面是一個簡單的例子:
var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime(); 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); document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小時 " + minutes + " 分鐘 " + seconds + " 秒 "; if (distance< 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "倒計時已結束!"; } }, 1000);
在這段代碼中,我們計算了當前時間和 2022 年 1 月 1 日 0 點的時間差,并將時間差轉換成了天、小時、分鐘和秒數。最后將計算結果寫入到了 HTML 中的 id 為 "countdown" 的元素中,實現倒計時的效果。
以上就是 JavaScript 中實時時間的一些應用方法。無論是計時器、時鐘、倒計時等,它們都需要實時時間來顯示正確的效果,而 JavaScript 提供的 Date() 對象和各種轉換方法就能很好地實現這些效果。