<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class='box'>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<script type="text/javascript">
function show() {
var now=new Date();
var hours=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
if(hours<10){
hours='0'+hours;
}
if(minute<10){
minute='0'+minute;
}
if(second<10){
second='0'+second;
}
//拼接成字符串
var timr=hours+':'+minute+':'+second;
var imgs=document.images;//查找页面中所有img标签;返回值是数组。
for(var i=0;i<timr.length;i++){
if(i==2||i==5){
imgs[i].src='../../img/second.png';
}else{
imgs[i].src='../../img/'+timr.charAt(i)+'.png';
}
}
console.log(imgs);
}
show();
setInterval(show,1000);
</script>
</body>
</html>
timr.charAt(i)返回指定位置的字符;
代码主要是根据 小时 分 秒的不断变化 ,修改 img的src属性
图片的名字和时间对应