数码时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
font-size: 25px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/0.png" alt="">
<img src="img/0.png" alt=""> :
<img src="img/0.png" alt="">
<img src="img/0.png" alt=""> :
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</div>
<script>
var o_img = document.querySelectorAll('#box img');
function fnTime(){
setInterval(function(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var arr = [
hours < 10 ? '0' : Math.floor(hours / 10), hours % 10,
minutes < 10 ? '0' : Math.floor(minutes / 10), minutes % 10,
seconds < 10 ? '0' : Math.floor(seconds / 10), seconds % 10
];
for(var i = 0,len = o_img.length;i < len;i ++){
o_img[i].src = 'img/' + arr[i] + '.png';
}
},1000)
}
fnTime();
</script>
</body>
</html>