<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟作业</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#box{font-size: 60px;}
#time{padding:20px;border:1px solid #222;background:#fff;margin:100px auto;height:173px;width:984px;}
#time li{float:left;width:123px;height:173px;overflow:hidden;}
#time li .num_img{position:relative;top:0;}
#time img{display:block;}
</style>
</head>
<script type="text/javascript" src="myself.js"></script>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
var time = document.getElementById('time');
var oLi = time.getElementsByTagName('li');
var len = oLi.length;
var timer = '';
var str = '';
var oldTime = getTime();
timeImg();
clearInterval(timer);
timer = setInterval(timeImg, 1000);
function getTime() {
var myTime = new Date(); //获取当前的系统时间
var myHour = myTime.getHours(); //时
var myMin = myTime.getMinutes(); //分
var mySec = myTime.getSeconds(); //秒
str = toTwo(myHour) + ':' + toTwo(myMin) + ':' + toTwo(mySec);
return str;
}
function toTwo(a) {
return a<10 ? '0'+a : ''+a;
}
function timeImg(){
getTime();
console.log(oldTime +'--'+ str);
// box.innerHTML = str;
for(var i=0; i<len; i++){
oLi[i].getElementsByTagName('div')[0].style.top = 0;
if(i==2 || i==5){
oLi[i].getElementsByTagName('img')[0].src = 'img/colon.jpg';
oLi[i].getElementsByTagName('img')[1].src = 'img/colon.jpg';
}else{
oLi[i].getElementsByTagName('img')[0].src = 'img/'+oldTime.charAt(i)+'.jpg';
if( oldTime.charAt(i) == 9 ){
oLi[i].getElementsByTagName('img')[1].src = 'img/0.jpg';
}else{
oLi[i].getElementsByTagName('img')[1].src = 'img/'+str.charAt(i)+'.jpg';
}
}
if(str.charAt(i) !== oldTime.charAt(i)){
doMove(oLi[i].getElementsByTagName('div')[0], 'top', 20, -173);
}
}
oldTime = str;
}
}
</script>
<body style="background:#ccc;">
<div id="box"></div>
<ul id="time">
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
<li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
</ul>
</body>
</html>
原生js图片时钟运行代码
需积分: 41 62 浏览量
2018-10-26
15:39:27
上传
评论
收藏 95KB RAR 举报
原生js图片时钟运行代码.rar （13个子文件） 
index.html 3KB
img 
colon.jpg 2KB 2.jpg 15KB 8.jpg 15KB 6.jpg 15KB 1.jpg 13KB 0.jpg 21KB 4.jpg 14KB 5.jpg 14KB 9.jpg 15KB 7.jpg 14KB 3.jpg 15KB
myself.js 694B资源评论
web青梅煮码
- 粉丝: 87
- 资源: 21
