<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 300px;
background-color: burlywood;
}
img:nth-child(6){
margin-left: 40px;
}
button{
width: 100px;
margin: 30px auto;
margin-left: 30px;
}
</style>
<script>
window.onload=function(){
var btns=document.getElementsByTagName('button');
var imgs=document.images;
btns[0].onclick=function(){
//点击时，每隔一秒执行一次函数
var id=setInterval(clock,1000);
btns[1].onclick=function(){
clearInterval(id);
}
}
function clock(){
var today=new Date();
var hour=handler(today.getHours());
var min=handler(today.getMinutes());
var sec=handler(today.getSeconds());
// console.log(hour);
var str=hour+min+sec;
// console.log(str);
//通过图片对应下标
for(var i=0;i<imgs.length;i++){
//设置dom对象的图片路径
imgs[i].src='./images/'+str.charAt(i)+'.png'
}
}
//处理单数的数字
function handler(num){
if(num>=10){
return num+'';
}else{
return '0'+num;
}
}
}
</script>
</head>
<body>
<div>
<button>跟进时间</button>
<button>停止跟进</button>
<br>
<br>
<br>
<img src="./images/0.png" alt="">
<img src="./images/0.png" alt=""> 时
<img src="./images/0.png" alt="">
<img src="./images/0.png" alt=""> 分
<img src="./images/0.png" alt="">
<img src="./images/0.png" alt=""> 秒
</div>
</body>
</html>
运行效果图：
用到的图片：
https://gitee.com/flower-523/jquery/tree/master/case/images
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
