純js實現動態時間顯示
阿新 • • 發佈：2018-11-02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
#div1{
width:100%;
height:100vh;
padding-top:100px;
font-size:50px;
background:#333;
color:#fff;
}
</style>
</head>
<body>
<div id="div1">
北京時間:<br/>
<img src="img/0.png">
<img src="img/0.png">
:
<img src="img/0.png">
<img src="img/0.png">
:
<img src="img/0.png">
<img src="img/0.png">
</div>
</body>
<script>
move();
function move(){
var oDate=new Date();
oHour=toDou(oDate.getHours())+'';
oMin=toDou(oDate.getMinutes());
oSen=toDou(oDate.getSeconds());
var oImg=div1.getElementsByTagName('img');
for(var i=0;i<oImg.length;i++){
oTimer=oHour+oMin+oSen;
oImg[i].src='img/'+oTimer.charAt(i)+'.png';
}
}
setInterval(move,1000);
function toDou(Num){
return (Num<10)?'0'+Num:Num;
}
</script>
</html>