数码时钟
·获取系统时间
Date对象
getHours、getMinutes、getSeconds
·显示系统时间
字符串连接
空位补零
·设置图片路径
charAt 获取第几位,有点像数组 (charAt(0))-->获取第0为的字符
·date对象的其他方法:
年(getFullYear()) 月(getMonth()) 日(getDate()) 星期(getDay())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function toDouble(num) {
if(num<10) {
return '0'+num;
}
else {
return ''+num;
}
}
window.onload = function() {
var oBtn1 = document.getElementById('btn1');
var aImg = document.getElementsByTagName('img');
var i = 0;
function updateTime() {
var oDate = new Date(); //获取系统时间
// var arr =['2', '1', '5', '5', '3', '2'];
var str = toDouble(oDate.getHours() ) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds() ); //toDouble是补零
//alert(str);
for (i=0; i<aImg.length; i++) {
aImg[i].src='images/' + str.charAt(i)+ '.png';
}
}
setInterval(updateTime,1000);
updateTime(); //在页面执行前,先调用一下这个函数,这样,打开页面就是这个时间,如果不调用这个函数,打开页面是6个0,过一秒才是当前时间
}
</script>
</head>
<body style="color:#FFFF00; background:#990099;font-size: 50px;">
<img src="images/0.png">
<img src="images/0.png">
点
<img src="images/0.png">
<img src="images/0.png">
分
<img src="images/0.png">
<img src="images/0.png">
秒
</body>
</html>