百度搜JS时钟会有一大堆结果，不过今天这个是我见过的比较牛的，当然，除了效果不错以外，重点是JS代码很值得研究，作者是就职于淘宝UED的天祁前辈，所以特此过来做个记录，也好为前端实验室留些资料。发现淘宝的前端开发人才辈出，还好我没有尝试应聘，完全就不是一个级别的说。还得继续加油努力啊，懂点JQuery的皮毛真的不算什么的说，废话不多说，看代码吧：
- 背景图片时钟JS代码
var TBClock=function(){
var get=function(ele){
return document.getElementById(ele)
},
fillZero=function(num,length){
num=num.toString();
length=length||2
var str="";
for(var i=0,n=length-num.length;i<n;i++){
str+="0";
}
return str+num;
},
setPos=function(ele,value,y){
ele.style.backgroundPosition="-"+value+"px "+y+"px";
},
setBigNum=function(ele,ele2,num){
setPos(ele,num.charAt(0)*16.4,0)
setPos(ele2,num.charAt(1)*16.4,0)
},
setFlashP=function(ele){
ele.style.backgroundPosition=((TBClock.flash=!TBClock.flash)==true)?"-164px 0":"-180px 0";
},
setSmallNum=function(ele,ele2,num){
setPos(ele,num.charAt(0)*10,-31)
setPos(ele2,num.charAt(1)*10,-31)
}
var eles={
h1:get("J_TB_clock_1"),
h2:get("J_TB_clock_2"),
m1:get("J_TB_clock_4"),
m2:get("J_TB_clock_5"),
s1:get("J_TB_clock_6"),
s2:get("J_TB_clock_7"),
p:get("J_TB_clock_3")
}
return {
flash:true,
init:function(){
this.start();
},
start:function(){
this.go();
setInterval(this.go,1000)
},
go:function(){
var T=new Date();
setBigNum(eles.h1,eles.h2,fillZero(T.getHours()))
setBigNum(eles.m1,eles.m2,fillZero(T.getMinutes()))
setFlashP(eles.p)
setSmallNum(eles.s1,eles.s2,fillZero(T.getSeconds()))
}
}
}();
TBClock.init();
当然，要完成这一些列的动作还需要HTML和CSS，这里就不累赘了，直接看下面的演示吧，或者直接移驾作品出生地：http://www.html-js.com/?p=611
- HTML :\ Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行 运行此代码
最后再罗嗦一句，在标题旁的那个时钟是FLASH版的，需要可以自己下载。
已有人对此文发表了评论