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