正文

JavaScript超酷时钟的制作

IP云
IP云V管理员/2 阅读
09/17
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示


<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超酷数码钟表 - 妙味课堂 - www.miaov.com</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
</head><body><div id="clock" class="date">
<h2><img src="data:images/title.png" /></h2>
<div class="year">
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img src="data:images/year.png" alt="year" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img src="data:images/month.png" alt="month" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img src="data:images/seven.png" alt="seven" longdesc="http://www.miaov.com" />
</div>
<div class="time">
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img src="data:images/sign.png" alt="sign" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img src="data:images/sign.png" alt="sign" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
<img class="pos2" src="data:images/week.png" alt="week" longdesc="http://www.miaov.com" />
<img class="num2" src="data:images/one.png" alt="one" longdesc="http://www.miaov.com" />
</div>
<div class="url" title="妙味课堂-超酷时钟"><a href="http://www.miaov.com/"><img src="data:images/miaov.png" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></div>
</div>
<script type="text/javascript">
(function(){
var num = document.querySelectorAll('.num');
var num2 = document.querySelector('.num2');
var weekImg = [
"images/seven.png",
"images/one.png",
"images/two.png",
"images/three.png",
"images/four.png",
"images/five.png",
"images/six.png"
];
toDate();
setInterval(toDate,1000);
function toDate(){
var date = new Date();
var year = date.getFullYear();
var month = toDB(date.getMonth() + 1);
var day = toDB(date.getDate());
var hours = toDB(date.getHours());
var minutes = toDB(date.getMinutes());
var seconds = toDB(date.getSeconds());
var week = date.getDay();
var time = year + month + day + hours + minutes + seconds;
for(var i = 0; i < num.length; i++){
num[i].src = "images/"+time[i]+".png";
}
num2.src = weekImg[week];
}
})();
function toDB(nub){
if(nub < 10){
return "0" + nub;
}
return "" + nub;
}
</script>
</body>
</html>