设计html页面
首先，在body部分设计时分秒在li中：
```html
- 00
- 00
- 00
```
样式部分设置
使用CSS的after属性给li添加一个冒号，方便对li中的内容进行操作：
```css
.wrap {
box-sizing: border-box;
width: 400px;
height: 300px;
margin: 100px auto;
border: 10px inset 2b1f1f;
font-size: 16px;
color: blueviolet;
}
.wrap ul li {
width: 100px;
height: 100px;
float: left;
text-align: center;
padding-top: 30px;
margin: 30px auto;
list-style: none;
font-size: 20px;
list-style: none;
}
.wrap ul li:nth-child(1) {
background-color: pink;
}
.wrap ul li:nth-child(2) {
background-color: orange;
}
.wrap ul li:nth-child(3) {
background-color: rgb(231, 24, 180);
}
.wrap ul li:nth-child(1)::after {
content: ":";
}
.wrap ul li:nth-child(2)::after {
content: ":";
}
```
JS定义对象存储时分秒
定义对象存储时分秒，并将它们转换为数字类型以便进行加法运算：
```javascript
let ali document.querySelectorAll(".wrap ul li");
let hh Number(ali[0].innerHTML);
let mm Number(ali[1].innerHTML);
let ss Number(ali[2].innerHTML);
```
设置定时器
使用setInterval函数设置定时器，实现时分秒的自动更新并处理进位问题。同时，当时分秒小于10时，在其前面加上0以保持格式统一：
```javascript
let one setInterval(function() {
ss (ss 1) % 60;
if(ss 0) {
mm (mm 1) % 60;
if(mm 0) {
hh (hh 1) % 24;
}
}
ali[0].innerHTML hh < 10 ? "0" hh : hh;
ali[1].innerHTML mm < 10 ? "0" mm : mm;
ali[2].innerHTML ss < 10 ? "0" ss : ss;
if(hh 2) {
clearInterval(one);
} else {
console.log('不取消');
}
}, 500);
```
实现定时器效果
通过以上步骤，您可以看到页面上的时间会不断地滴答滴答地更新，实现了一个简单的定时器效果。随着时间的流逝，时、分、秒会不断增加，并且在达到特定条件时定时器会停止。这种基础的定时器实现方法可以应用于各种需要时间跟踪和计时的场景中。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
