简易时钟
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>length</title>
<style>
body{
background-color: #000;
margin: 200px 130px;
}
img{
width: 200px;
height: 200px;
}
</style>
<script>
function toDou(n)//将时间补零转化成字符串
{
if(n<10){
return '0'+n;
}
else{
return ''+n;
}
}
window.οnlοad=function(){
var aImg=document.getElementsByTagName('img');
function tick(){
var oData=new Date();//系统获取时间
var str=toDou(oData.getHours())+toDou(oData.getMinutes())+toDou(oData.getSeconds());//将获取的时分秒拼接成字符串
for(var i=0;i<aImg.length;i++)
{
aImg[i].src=''+str.charAt(i)+'.png';//将图片路径赋值为字符串中的数字,charAt处理兼用性
}
}
setInterval(tick, 1000);//开启定时器,1000毫秒执行一次
tick();//先执行一次,防止开始时出现断点
};
</script>
</head>
<body>
<img src="0.png" alt="0">
<img src="0.png" alt="0">
:
<img src="0.png" alt="0">
<img src="0.png" alt="0">
:
<img src="0.png" alt="0">
<img src="0.png" alt="0">
</body>
</html>