成一个即时显示当前时间的页面。效果图参考如下:每一秒刷新一次提示,可以使用setTimeout函数的调用实现每隔一秒钟刷新一下div区域。
时间: 2024-03-22 22:38:58 浏览: 62
js实现同一页面可多次调用的图片幻灯切换效果
以下是实现该功能的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>实时显示当前时间</title>
</head>
<body>
<div id="time"></div>
<script>
function showTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var timeString = hours + ':' + minutes + ':' + seconds;
var timeDiv = document.getElementById('time');
timeDiv.innerHTML = timeString;
setTimeout(showTime, 1000);
}
showTime();
</script>
</body>
</html>
```
在上面的示例中,我们首先定义了一个 `showTime` 函数,在函数中获取当前时间,然后将小时、分钟和秒数格式化为两位数,并将其拼接成一个字符串。接着获取文档中的 `time` 元素,并将其内容设置为当前时间字符串。最后使用 `setTimeout` 函数调用 `showTime` 函数,以实现每隔一秒钟更新一次时间。在页面加载完成后,调用 `showTime` 函数,使其立即显示当前时间。
阅读全文