1、首先，设计html页面。先看body部分。设计时分秒在li中<body><div class="wrap"><ul><li>00</li><li>00</li><li>00</li></ul></div></body>
2、再看样式部分：用after给li加一个：这样做方便对li中的内容操作。<style>.wrap{box-sizing: bor颊俄岿髭der-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:":";}</style>
3、然后是js定义对象，存储时分秒。这里为了可以实现时分秒的加法，将其转换为number类型。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);
4、然后设置setInterval定时。由于时分秒是60进制，所以到60时需要置0。为了更加符合实际，当时器皆阄诟分秒<10时，将其前面加0。let one=setInterval(function(){ss=(ss%60)+1;if(ss==60){ss=0;mm=(mm%60)+1;if(mm==60){mm=0;hh=(hh%60)+1;}}//add [0,.....9] to 0ali[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);
5、最后就可以看见时间一直在滴答滴答的走啊
