Dynamic Time Display

元素，ID为 timeDisplay ，用于显示时间。我们还包含了一个外部JavaScript文件 script.js ，稍后将在这个文件中编写JavaScript代码。 ## 二、JavaScript代码 接下来，我们编写JavaScript代码来获取当前时间并更新页面内容。 ```javascript // script.js function updateTime() { const timeDisplay = document.getElementById('timeDisplay'); const now = new Date(); const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); const currentTime = `${hours}:${minutes}:${seconds}`; timeDisplay.textContent = currentTime; } setInterval(updateTime, 1000); updateTime(); // Initial call to display time immediately ``` 在这个代码中，我们定义了一个名为 updateTime 的函数。在这个函数中，我们首先获取 timeDisplay 元素，然后使用 Date 对象获取当前时间。我们将小时、分钟和秒数格式化为两位数，并构建一个表示当前时间的字符串。最后，我们将这个字符串设置为 timeDisplay 元素的文本内容。 我们使用 setInterval 方法每秒调用一次 updateTime 函数，以便页面上的时间能够实时更新。我们还在 setInterval 调用之前调用了一次 updateTime 函数，以便页面在加载时立即显示当前时间。 ## 三、优化显示格式 为了使时间显示更加美观，我们可以进一步优化时间的显示格式。例如，可以将时间显示为 HH:MM:SS AM/PM 格式，添加日期显示等。 ```javascript function updateTime() { const timeDisplay = document.getElementById('timeDisplay'); const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); const ampm = hours >= 12 ? 'PM' : 'AM'; const formattedHours = (hours % 12 || 12).toString().padStart(2, '0'); const currentTime = `${formattedHours}:${minutes}:${seconds} ${ampm}`; timeDisplay.textContent = currentTime; } setInterval(updateTime, 1000); updateTime(); ``` 在这个版本中，我们添加了AM/PM格式，并将24小时制转换为12小时制。同时，我们确保小时数始终显示为两位数。 ## 四、添加日期显示 如果我们还希望显示当前日期，可以在 updateTime 函数中添加日期的处理逻辑。 ```javascript function updateTime() { const timeDisplay = document.getElementById('timeDisplay'); const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); const ampm = hours >= 12 ? 'PM' : 'AM'; const formattedHours = (hours % 12 || 12).toString().padStart(2, '0'); const currentTime = `${formattedHours}:${minutes}:${seconds} ${ampm}`; const year = now.getFullYear(); const month = (now.getMonth() + 1).toString().padStart(2, '0'); const day = now.getDate().toString().padStart(2, '0'); const currentDate = `${year}-${month}-${day}`; timeDisplay.textContent = `${currentDate} ${currentTime}`; } setInterval(updateTime, 1000); updateTime(); ``` 在这个版本中，我们获取了当前的年份、月份和日期，并格式化为 YYYY-MM-DD 格式。然后，我们将日期和时间组合在一起显示在页面上。 ## 五、样式美化 最后，我们可以通过CSS来美化时间的显示。 ```html ``` 在这个HTML文件中，我们添加了一些基本的CSS样式，将时间显示的字体大小设置为2em，使用Arial字体，并将文本颜色设置为深灰色。同时，我们将时间显示的位置居中，并设置了一个上边距。 通过以上步骤，我们实现了一个动态显示当前时间的网页。通过JavaScript获取当前时间，并使用定时器定时更新页面内容，我们可以让网页上的时间实时更新。这种方法不仅可以用于显示时间，还可以用于其他需要实时更新的内容。

文章来源：PingCode