設(shè)計(jì)html頁面
首先，在body部分設(shè)計(jì)時分秒在li中：```html 00 00 00 ```樣式部分
首先，在body部分設(shè)計(jì)時分秒在li中：
```html
- 00
- 00
- 00
```
樣式部分設(shè)置
使用CSS的after屬性給li添加一個冒號，方便對li中的內(nèi)容進(jìn)行操作：
```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定義對象存儲時分秒
定義對象存儲時分秒，并將它們轉(zhuǎn)換為數(shù)字類型以便進(jìn)行加法運(yùn)算：
```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);
```
設(shè)置定時器
使用setInterval函數(shù)設(shè)置定時器，實(shí)現(xiàn)時分秒的自動更新并處理進(jìn)位問題。同時，當(dāng)時分秒小于10時，在其前面加上0以保持格式統(tǒng)一：
```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);
```
實(shí)現(xiàn)定時器效果
通過以上步驟，您可以看到頁面上的時間會不斷地滴答滴答地更新，實(shí)現(xiàn)了一個簡單的定時器效果。隨著時間的流逝，時、分、秒會不斷增加，并且在達(dá)到特定條件時定時器會停止。這種基礎(chǔ)的定時器實(shí)現(xiàn)方法可以應(yīng)用于各種需要時間跟蹤和計(jì)時的場景中。