首页JavaScript编写程序完成在网页当中动态的显示时间

JavaScript编写程序完成在网页当中动态的显示时间

时间: 2024-10-25 20:12:24 浏览: 17

JavaScript可以很容易地在网页上实现动态显示当前时间的功能。通常使用`<script>`标签将JavaScript代码插入到HTML中，或者在外部文件中引用并通过`<script src="..."></script>`引用。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态显示时间</title> </head> <body> <h1 id="timeDisplay">点击获取当前时间</h1> <script> function displayTime() { var currentTime = new Date(); // 创建一个新的Date对象 var hours = currentTime.getHours(); // 获取小时，0-23 var minutes = currentTime.getMinutes(); // 获取分钟，0-59 var seconds = currentTime.getSeconds(); // 获取秒数，0-59 // 格式化时间 (如果需要带前导零) hours = padZero(hours); minutes = padZero(minutes); seconds = padZero(seconds); var timeString = hours + ':' + minutes + ':' + seconds; // 时间字符串 document.getElementById("timeDisplay").innerText = timeString; // 更新显示的时间 } // 辅助函数，用于在数字前面添加0，如果小于10 function padZero(num) { return num < 10 ? '0' + num : num; } // 每秒更新一次时间 setInterval(displayTime, 1000); </script> </body> </html> ``` 在这个例子中，我们创建了一个定时器（`setInterval`），每秒钟调用一次`displayTime`函数，这个函数会获取当前的时间，并将其格式化后显示在页面上。

阅读全文