标签：
<!-- 耽搁了几天，于是又继续回到JS的学习了~~ 各种头大，加油吧。。。 -->
<!doctype html>
<html>
<head>
<title>数码时钟</title>
<meta charset="gb2312">
<style type="text/css">
*{ padding:0; margin:0;}
body{background:rgb(0,2,51); color:white;}
#box{ width:600px;height:400px; border:1px solid #fff; margin:100px auto; position:relative; }
#box>h2{ position:relative; top:30px; font-size:36px; text-align:center;
text-shadow:2px 4px 3px #eee;}
.box{ width:560px;height:80px; margin:20px auto; margin-left:40px;
position:relative; top:40px; text-align: left; vertical-align:middle;}
.box>span{font-size: 48px; text-shadow:1px 2px #666;}
img{ width:40px;height:60px;position:relative;top:10px;}
#box p{text-align:center; position:absolute; bottom:20px; left:250px; font-size:14x; }
#week{width:155px; height:88px; position:absolute; left:395px; top:200px;}
</style>
</head>
<body>
<div id="box">
<h2>简易时钟</h2>
<!-- 日期 -->
<div class="box" id="date">
<img src="images/0.png" ><img src="images/0.png" ><img src="images/0.png" ><img src="images/0.png" >
<span>年</span>
<img src="images/0.png" ><img src="images/0.png" >
<span>月</span>
<img src="images/0.png" ><img src="images/0.png" >
<span>日</span>
</div>
<!-- 时间 -->
<div class="box" id="time">
<img src="images/0.png" >
<img src="images/0.png" ><span>:</span>
<img src="images/0.png" >
<img src="images/0.png" ><span>:</span>
<img src="images/0.png" >
<img src="images/0.png" >
</div>
<img id="week" src="images2/0.png">
<p>fridolph 制作</p>
</div>
<script src="script/shizhong.js"></script>
</html>
-------------------------------------------下面是主要的 js代码 -----------------------------------------------------
function toYear(n){
if(n){return ‘‘+n;}
}
function toMonth(n){
if(n){return 1+n;}
}
function toDouble(n){
if(n<10){
return ‘0‘+n;
}
else{
return ‘‘+n;
}
}
function date_time(){
var oDate = new Date();
var oDbox = document.getElementById(‘date‘);
var aImg_date = oDbox.getElementsByTagName(‘img‘);
var str_date = toYear(oDate.getFullYear())+toMonth(oDate.getMonth())+toDouble(oDate.getDate());
for(var i=0;i<aImg_date.length;i++){
aImg_date[i].src=‘images/‘+str_date[i]+‘.png‘;
}
var oTbox = document.getElementById(‘time‘);
var aImg_time = oTbox.getElementsByTagName(‘img‘);
var str_time = toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
for(var i=0; i<aImg_time.length; i++){
aImg_time[i].src=‘images/‘+str_time[i]+‘.png‘;
}
var oWeek = document.getElementById(‘week‘);
var str_week = oDate.getDay();
oWeek.src=‘images2/‘+str_week+‘.png‘;
}
window.onload = function(){
setInterval(date_time,1000);
date_time();
}
/* 练习了只有一半= =剩下全是自己琢磨出来的，也是……耗费大量时间。。。 也是醉~~
说下大致思路： 把结构和样式确定了之后， 我们要让时间自动显示出来，为此，我先做了时间的部分~
声明一个str，通过 get时间 拼出现在 表示现在时间的字符串~ 如：06 21 32 分别是时分秒， 为了保证位数正确，要写一个数字小于10添0的函数
遍历字符串，并赋给图片的src~ ( ‘+str_time[i]+’ ) 以此修改src地址来替换显示我们想要的图片（数字）
这部分能完成的话，剩下的部分也同理~~
ps 星期那， 本想 从数组中调用~~ 结果尝试多次都没有成功~ 还是做的图片用此方法来替换。。。以后试试用别的方法来做~~
就暂时到这里吧~~ … 感觉越来越吃不消啊， 还是得多练，多积累~ … 加油啊，坚持就是胜利！
*/
标签：
原文地址：http://www.cnblogs.com/fuyinsheng/p/5031310.html
