html使用定时器完成60秒秒表计时,系统时间的展示,用js完成
时间: 2024-02-22 12:56:06 浏览: 22
好的,下面是具体实现方法:
HTML部分:
```html
<div>
<span id="timer">00:00:00</span>
<span id="systemTime"></span>
</div>
```
JS部分:
```javascript
// 获取展示时间的元素
var timer = document.getElementById("timer");
var systemTime = document.getElementById("systemTime");
// 定义初始时间为0秒
var seconds = 0;
// 定义定时器,每隔1秒执行一次回调函数
var intervalId = setInterval(function() {
// 秒数加1
seconds++;
// 将秒数转化为时分秒格式
var hour = Math.floor(seconds / 3600);
var minute = Math.floor((seconds - hour * 3600) / 60);
var second = seconds - hour * 3600 - minute * 60;
// 将时分秒格式展示在页面上
timer.innerHTML = formatTime(hour) + ":" + formatTime(minute) + ":" + formatTime(second);
// 获取当前系统时间并展示在页面上
var date = new Date();
systemTime.innerHTML = date.toLocaleString();
}, 1000);
// 将数字转化为两位数的字符串形式
function formatTime(num) {
return num < 10 ? "0" + num : num.toString();
}
```
这样就可以实现一个简单的60秒计时器,并且每秒展示当前系统时间。