使用js实现一个从00:00:00动态的每秒递增的计时器,并将计算的值实时的渲染在页面上
时间: 2024-09-23 08:14:40 浏览: 41
在JavaScript中,你可以使用`setInterval`配合`Date`对象和字符串格式化来实现这样的功能。这里有一个简单的示例,它会在每秒更新并显示时间:
```javascript
// 初始化时间
var time = "00:00:00";
// 每秒更新计时器
setInterval(function() {
var date = new Date();
// 转换为分钟和秒
var minutes = Math.floor(date.getMinutes());
var seconds = padZero(Math.floor(date.getSeconds()));
// 如果分钟小于10,则补零
if (minutes < 10) {
minutes = "0" + minutes;
}
// 组合小时、分钟和秒
var currentTime = padZero(Math.floor(date.getHours())) + ":" + minutes + ":" + seconds;
// 将当前时间替换原有时间显示
document.getElementById('timer').textContent = currentTime;
// 清除小时部分大于24的情况,避免显示25:xx:xx
if (currentTime.split(":")[0] > 23) {
time = "00:" + currentTime.split(":")[1];
} else {
time = currentTime;
}
}, 1000); // 1000毫秒即1秒
// 辅助函数,用于保证数字前有两位零
function padZero(num) {
return num < 10 ? '0' + num : num;
}
```
在这个例子中,我们首先创建了一个初始的时间字符串`00:00:00`,然后使用`setInterval`每秒调用一次内部函数。该函数会获取当前时间,格式化成“HH:mm:ss”的形式,然后将其显示在页面上指定的元素id为'timer'的元素内。
注意,为了防止小时显示超过24小时,我们在每次更新后检查当前小时是否超过23,如果是则只保留分钟和秒部分,并重置小时。