用js中的Date对象实现一个动态时钟的效果,基本功能是实现当前时间
时间: 2023-06-09 20:07:08 浏览: 153
基于javascript实现动态时钟效果
的实时显示,可以随着时间的改变自动更新时间。可以参考以下代码实现动态时钟效果:
```javascript
function showTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout(showTime, 1000);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
showTime();
```
在HTML中添加如下代码用于显示时钟:
```html
<div id="clock"></div>
```
该代码将创建一个div元素,id为"clock",用于显示动态时钟。在showTime()函数中首先获取当前时间,然后用checkTime()函数进行格式化,最终将格式化后的时间显示到HTML页面上。setTimeout()函数将每隔1秒钟自动更新时间。
阅读全文