JS-数字时钟
程序员文章站
2022-05-28 09:01:14
...
先看下效果
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<div>
<ul id="date">
<img src="img/0.png">
<img src="img/0.png">
<img src="img/0.png">
<img src="img/0.png">
<span>年</span>
<img src="img/0.png">
<img src="img/0.png">
<span>月</span>
<img src="img/0.png">
<img src="img/0.png">
<span>日</span>
</ul>
<ul id="week">
<span>星期</span>
</ul>
<ul id="time">
<img src="img/0.png">
<img src="img/0.png">
<span>:</span>
<img src="img/0.png">
<img src="img/0.png">
<span>:</span>
<img src="img/0.png">
<img src="img/0.png">
</ul>
</div>
<script rel="script" src="js/index.js" type="text/javascript"></script>
</body>
</html>
2.CSS
* {
margin: 0;
padding: 0
}
body{
width: 100%;
height: 100%;
background: grey;
}
div{
width: 500px;
height: 300px;
position: absolute;
top:50%;
left:50%;
margin: -150px 0 0 -250px;
}
#date{
width: 100%;
height: 33%;
position: relative;
top: 0%;
left: 15%;
display: inline-block;
}
#week{
width: 100%;
height: 33%;
position: relative;
display: inline-block;
left: 40%;
}
#time{
width: 100%;
height: 50%;
position: relative;
display: inline-block;
left: 25%;
}
span{
color: white;
font-size: x-large;
}
3.JS
window.onload = function () {
setInterval(a=function () {
//獲取對象
var oUlDate = document.getElementById('date');
var oImgsForDate = oUlDate.getElementsByTagName('img');
var oUlTime = document.getElementById('time');
var oImgsForTime = oUlTime.getElementsByTagName('img');
var oUlWeek = document.getElementById('week');
//获取时间
var oDate = new Date();
var h = addPreZero(oDate.getHours());
var m = addPreZero(oDate.getMinutes());
var s = addPreZero(oDate.getSeconds());
var sTime = h+m+s;
//日期
var yyyy = oDate.getFullYear();
var mm = oDate.getMonth()+1;
var dd = oDate.getDate();
var sDate = yyyy+addPreZero(mm)+addPreZero(dd);
//星期
var d = oDate.getDay();
var sDay;
switch (d){
case 0:
sDay='星期日';
break;
case 1:
sDay='星期一';
break;
case 2:
sDay='星期二';
break;
case 3:
sDay='星期三';
break;
case 4:
sDay='星期四';
break;
case 5:
sDay='星期五';
break;
case 6:
sDay='星期六';
break;
}
//设置日期和时间
for(var j = 0;j<oImgsForDate.length;j++){
oImgsForDate[j].src='img/'+sDate.charAt(j)+'.png';
}
oUlWeek.innerHTML='<span>'+sDay+'</span>';
for(var i = 0;i<oImgsForTime.length;i++){
oImgsForTime[i].src='img/'+sTime.charAt(i)+'.png';
}
}, 1000);
a();
}
function addPreZero(n) {
if (n < 10) {
return '0' + n;
} else {
return '' + n;
}
}
推荐阅读
-
php 用户名正则表达式(中文,英文,数字,字母)
-
基于jquery的图片的切换(以数字的形式)_jquery
-
php 数组 数字 补零
-
php恢复数组的key为数字序列的方法_PHP教程
-
网上流传的用手机最后一位数字算出实际年龄的方法,是不是和算法有关?
-
flash怎么将数字转换为字符串并提取数位?
-
编写一个程序统计输入字符串中: 各个数字、空白字符、以及其他所有字符出现的次数
-
支持中文字母数字、自定义字体php验证码代码_PHP
-
PHP 向 MySql 中数据修改操作时,只对数字操作有效,非数字操作无效,怎么办?
-
制作四个线程,共同操作同一个数字,其中2个线程,对该数字进行++操作另外两个线程对该数字进行--操作。