資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 設計數字時鐘？
處理時間是 Web 開發人員最常見的概念之一。無論是安排訂閱期限還是安排電子郵件傳送，都需要開發人員處理時間。在本文中，我們將學習如何使用 JavaScript 設計數字時鐘。
點選按鈕獲取時間
我們可以使用多種邏輯和程式碼實現相同的操作。首先，在本節中，我們將學習如何設計一個數字時鐘，該時鐘在使用者點選按鈕時顯示時間。
按照以下步驟操作：
首先，建立一個使用者可以點選以檢視時間的按鈕。
接下來，在按鈕上建立一個 onClick 監聽器，並在點選時呼叫一個函式，例如 main。
在 main 函式中定義一個數據物件。
更新所需目標元素的文字（innerHTML）以顯示時間。
示例
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 100px;
font-size: 50px;
color: #333;
}
</style>
</head>
<body>
<script>
const main=()=>{
var time=new Date();
const n=document.getElementById("container").innerHTML = time;
}
main();
</script>
<div class="container" id="container"></div>
<button onclick="main()">click here</button>
</body>
</html>
解釋
這段程式碼使用 JavaScript 在 HTML 中建立一個數字時鐘。它包含一個指令碼，該指令碼建立一個新的 Date 物件並將該物件設定為 time 變數。
然後，時間顯示在 ID 為 container 的容器元素中。呼叫 main() 函式來初始化時鐘，幷包含一個帶有 onclick 屬性的按鈕，允許使用者更新時間。
獲取單個時間
在前面的示例中，我們看到了如何在使用者點選按鈕時獲取時間。但是，我們可能還需要動態更改時間並在我們的 Web 應用程式中更新它。JavaScript 提供了一個名為 setInterval 的方法，該方法在使用者指定的一段時間後再次呼叫該函式。
語法
setInterval(<function name>, <time of interval>)
示例
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
</head>
<body>
<div id="clockDisplay"></div>
<script>
function updateClock() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let meridiem = "AM";
if (hours > 12) {
hours -= 12;
meridiem = "PM";
}
if (hours === 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
let time = hours + ":" + minutes + ":" + seconds + " " + meridiem;
document.getElementById("clockDisplay").innerHTML = time;
}
setInterval(updateClock, 1000);
</script>
</body>
</html>
解釋
這段程式碼使用 JavaScript 在 HTML 中建立一個數字時鐘。它包含一個 updateClock() 函式，該函式檢索當前日期並將其格式化為小時、分鐘、秒和上午/下午。
setInterval() 方法用於每秒更新一次時鐘。時間顯示在 ID 為 clockDisplay 的容器元素中。
我們可以使上述程式碼更加簡潔。由於 Date() 方法給出的時間包含小時、分鐘、秒等，我們可以對它們執行數值運算以獲得所需的結果。
示例
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 100px;
font-size: 50px;
color: #333;
}
</style>
</head>
<body onload="setInterval(() => {
let date = new Date();
let time = (date.getHours() % 12 || 12) + ':' + ('0' + date.getMinutes()).slice(-2) + ':' + ('0' + date.getSeconds()).slice(-2) + ' ' + (date.getHours() >= 12 ? 'PM' : 'AM');
document.getElementById('clockDisplay').textContent = time;
}, 1000);">
<div id="clockDisplay"></div>
</body>
</html>
解釋
這是一個包含嵌入式 CSS 和 JavaScript 程式碼的 HTML 文件。它顯示一個數字時鐘，該時鐘使用 JavaScript 中的 setInterval 方法每秒更新一次。
時鐘以 12 小時制格式顯示當前時間，並顯示上午/下午指示。CSS 樣式定義了時鐘顯示的字體系列、大小、顏色和文字對齊方式。
結論
使用 JavaScript 設計數字時鐘是一項有益的練習，可以幫助提高您的程式設計技能。透過使用 setInterval 或 setTimeout 函式，您可以建立一個動態且視覺上吸引人的時鐘，該時鐘可以即時準確地顯示當前時間。
3K+ 瀏覽量
