<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
</head>
<style type="text/css">
.max{
width: 700px;
height: 200px;
margin: 100px auto;
position: relative;
}
img{
width: 100px;
height: 190px;
float: left;
}
.aa{
font-size: 100px;
width: 50px;
text-align: center;
float: left;
margin: 30px auto;
color:darkslateblue;
}
</style>
<body>
<div class="max">
<img src="../img2/0.png" class="one">
<img src="../img2/0.png" class="two">
<div class="aa">:</div>
<img src="../img2/0.png" class="one1">
<img src="../img2/0.png" class="two1">
<div class="aa">:</div>
<img src="../img2/0.png" class="one2">
<img src="../img2/0.png" class="two2">
</div>
</body>
<script type="text/javascript">
//var dqsj = new Date();
var sj = ["0","1","2","3","4","5","6","7","8","9"];//图片名字（可以直接去截图数字）
var one = document.querySelector(".one");
var two = document.querySelector(".two");
var one1 = document.querySelector(".one1");
var two1 = document.querySelector(".two1");
var one2 = document.querySelector(".one2");
var two2 = document.querySelector(".two2");
setInterval(function(){
var dqsj = new Date();
let sz = dqsj.toLocaleTimeString();
sj.forEach(item=>{
if(sz.charAt(0)==item){
one.src="../img2/"+item+".png"
}
if(sz.charAt(1)==item){
console.log(item)
two.src="../img2/"+item+".png"
}
if(sz.charAt(3)==item){
one1.src="../img2/"+item+".png"
}
if(sz.charAt(4)==item){
console.log(item)
two1.src="../img2/"+item+".png"
}
if(sz.charAt(6)==item){
one2.src="../img2/"+item+".png"
}
if(sz.charAt(7)==item){
console.log(item)
two2.src="../img2/"+item+".png"
}
})
},1000)
</script>
</html>