<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Digit Clock</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../../lib/base.js"></script> <link rel="stylesheet" type="text/css" href="base.css"> <script type="text/javascript"> window.onload = function(){ new DigitalClock(document.getElementById('digitClock')); }; function DigitalClock(container) { this.container = container; var xx = this.container.getElementsByTagName('img'); this.images = []; for(var i=0;i<xx.length;i++){ if(i!=2&&i!=5){ this.images.push(xx[i]); } } this.setImage(); this.setTime(); } DigitalClock.prototype = { //思路是用产生的date对象的时间替换对应的图片名字 setTime:function(){ var _this = this; setInterval(function(){ _this.setImage(); },1000); }, setImage:function(){ var d = new Date(); var h = (d.getHours()+'').addPrevZeros(2);//get函数得到的是number var i = (d.getMinutes()+'').addPrevZeros(2); var m = (d.getSeconds()+'').addPrevZeros(2); var a = (h+i+m).split(''); for(var i=0;i<a.length;i++){ this.images[i].src = 'digits/'+a[i]+'.gif'; } } }; //给一个字符串前面拼接0 String.prototype.addPrevZeros = function(count){ //s要拼接0的字符串 //count 拼接0以后s的长度 if(this.length>=count) return this; else{ return new Array(count-this.length+1).join('0')+this; } }; </script> </head> <body> <h1>Digit Clock</h1> <p> 当前时间为: <span id="digitClock"> <img src="digits/0.gif" alt="0" class="clockImage" /> <img src="digits/0.gif" alt="0" class="clockImage" /> <img src="digits/colon.gif" alt=":" /><!--2--> <img src="digits/0.gif" alt="0" class="clockImage" /> <img src="digits/0.gif" alt="0" class="clockImage" /> <img src="digits/colon.gif" alt=":" /><!--5--> <img src="digits/0.gif" alt="0" class="clockImage" /> <img src="digits/0.gif" alt="0" class="clockImage" /> </span> </p> </html>