您的位置：首页 > Web前端 > JavaScript

数字时钟的实现

2016-05-27 20:30 525 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>数码时钟的实现</title>
</head>
<style>
body{background: blue;color: white;font-size: 30px;}
#div1{width: 300px;height: 36px;border: 1px solid #fff;}
#div1 img{width: 25px; height: 36px;position: relative;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var aImg=document.getElementsByTagName('img');
var oDate = new Date();
var prevStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + toZero(oDate.getSeconds());
//alert(prevStr);
var nextStr='';
var arr=[];
var timer=null;
for(var i=0;i<aImg.length;i++){
//设定图片的数字。.charAt()方法返回指定索引位置的char值。str.charAt(0)检索str中的第一个字符
aImg[i].src=prevStr.charAt(i)+'.png';
}
setInterval(toChang,1000);
function toChang(){
var oDate = new Date();
nextStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + toZero(oDate.getSeconds());

toCom(prevStr,nextStr);

prevStr = nextStr;
};
function toCom(str1,str2){
arr=[];//这里每次都要清空
for(var i=0;i<str1.length;i++){
if(str1.charAt(i)!=str2.charAt(i)){
arr.push(i);
}
}
startMove();

}
//图像翻转
function startMove(){

var iSpeed = -4;//高度36，运动9次就完成了

timer = setInterval(function(){

for(var i=0;i<arr.length;i++){

if(aImg[arr[i]].offsetHeight == 0){
iSpeed = 4;
aImg[arr[i]].src = nextStr.charAt(arr[i]) + '.png';
}

aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
//设置top是为了从中间翻转
aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight/2 - 18 + 'px';

if(aImg[arr[i]].offsetHeight == 36){
clearInterval(timer);
}

}

},10);

}

function toZero(num){
if(num<10){
return "0"+num;
}
else{
return ''+num;
}
};

};
</script>
<body>
<div id='div1'>
<img src="0.png">
<img src="0.png">:
<img src="0.png">
<img src="0.png">:
<img src="0.png">
<img src="0.png">
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html css

相关文章推荐

新的分享

章节导航