<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数码时钟</title>
<style type="text/css">
*{margin:0;padding:0;vertical-align: middle;list-style: none;box-sizing: border-box;}
body{background-color: #003;}
.main{width: 365px;height: 170px;margin:100px auto;}
h3{width: 100%;height: 45px;background:url(images/title.png) no-repeat center;margin-bottom: 40px;}
</style>
</head>
<body>
<div class="main">
<h3></h3>
<div style="margin-bottom: 20px;" id="time1">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/year.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/month.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/seven.png">
</div>
<div id="time2">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/sign.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/sign.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/week.png">
<img src="images/seven.png" class="week">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var aIm = document.getElementById('time1').getElementsByTagName('img');
var aIm1 = document.getElementById('time2').getElementsByTagName('img');
var week =['seven','one','two','three','four','five','six'];
function toDou(n){
if (n<10) {
return '0'+n;
}else{
return ''+n;
}
}
// 获取当前时间，并转换为字符串，循环获取字符串并改变节点图片路径
tick();
setInterval(tick, 1000);
function tick(){
var oDate = new Date();
var num = oDate.getDay();
var str1 = toDou(oDate.getFullYear())+'-'+toDou(oDate.getMonth()+1)+'-'+toDou(oDate.getDate());
for(var i = 0;i<aIm.length-1;i++){
if(str1.charAt(i) == '-'){
continue;
}
aIm[i].src = 'images/'+str1.charAt(i)+'.png';
}
var str2 = toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
//charAt()兼容性要比str[i]好
for(var j = 0;j<aIm1.length-2;j++){
if(str2.charAt(j) == ':'){
continue;
}
aIm1[j].src = 'images/'+str2.charAt(j)+'.png';
}
aIm1[aIm1.length-1].src = 'images/'+week[num]+'.png';
}
</script>
javascript原生实现前端页面中的数码时钟效果例子
需积分: 31 193 浏览量
2018-12-10
00:18:26
上传
评论
收藏 300KB ZIP 举报
时间表.zip （25个子文件） 
时间表 images 
sign.png 1KB month.png 2KB 5.png 1KB 9.png 1KB seven.png 1KB five.png 1KB one.png 513B bg.png 251KB 1.png 854B title.png 11KB six.png 2KB zns.png 2KB 0.png 2KB four.png 2KB three.png 1KB 6.png 2KB 2.png 2KB 7.png 1KB 4.png 1KB year.png 2KB week.png 4KB 8.png 2KB two.png 914B 3.png 2KB
index.html 3KB资源评论
