JavaScript是一種運行在瀏覽器上的編程語言,常用來實現例如表單驗證、交互動畫等前端相關的工作。其中,得到當前時間并在頁面上顯示是JavaScript的一項常見任務。
JavaScript在得到當前時間的方法是通過Date對象來構造一個當前時間的實例。例如,下面的代碼可以得到當前時間并將其存儲在一個變量中:
var now = new Date();
得到當前時間后,JavaScript便能夠將其在頁面中顯示出來。一個常見的用途是相對時間的顯示,例如“剛剛”、“1分鐘前”等。一個簡單的實現方法是使用Math對象來計算時間間隔:
// 兩個時間的時間戳差值 var diff = Math.round((Date.now() - parsedDate) / 1000); if (diff< 60) { return "剛剛"; } else if (diff< 120) { return "1 分鐘前"; } else if (diff< 3600) { return Math.floor(diff / 60) + " 分鐘前"; } else if (diff< 7200) { return "1 小時前"; } else if (diff< 86400) { return Math.floor(diff / 3600) + " 小時前"; } else if (diff< 172800) { return "1 天前"; } else { return Math.floor(diff / 86400) + " 天前"; }
另外一種常見的用途是在電子鐘表的顯示中使用。一個基本的實現方法是,每秒更新一次當前時間并在頁面上輸出。例如:
function tick() { var element = document.getElementById('clock'); var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); element.textContent = hours + ':' + minutes + ':' + seconds; setTimeout(tick, 1000); // 每秒更新一次時間 } tick();
上述代碼首先通過getElementById方法獲取到一個id為“clock”的元素,然后每秒一次地更新其中的textContent屬性,該屬性保存了當下的小時數、分鐘數和秒數。
除了直接輸出當前時間外,JavaScript還能夠將時間格式化為各種各樣的形式。例如:
// 格式化為年-月-日 時:分:秒 var dateString = new Date().toLocaleString(); console.log(dateString); // 2019-3-3 14:0:35 // 格式化為中文顯示 var options = {year: "numeric", month: "long", day: "numeric", weekday: "long"}; var dateString = new Date().toLocaleDateString('zh-CN', options); console.log(dateString); // 2019年3月3日星期日 // 格式化為24小時制,且省略秒數 var options = {hour12: false, hour: "numeric", minute: "numeric"}; var dateString = new Date().toLocaleTimeString('en-US', options); console.log(dateString); // 14:02
總的來說,JavaScript有豐富的時間處理手段和表現形式,無論是在相對時間顯示、鐘表實現、還是時間格式化等方面都能夠得心應手。同時,JavaScript的與HTML、CSS的配合也使其在實現動態效果方面具有不可比擬的優勢。