一个简单的时钟
<body> <div id="J_TB_clock"> <div id="J_TB_clock_1" class="small-num"></div> </div><style type="text/css"> #J_TB_clock{ width:104px; height:30px; } #J_TB_clock_3{ width:10px; } .big-num{ float:left; width:16px; height:30px; margin-right:2px; background: url(clock.png) no-repeat; } .small-num{ float:left; width:9px; height:15px; background: url(clock.png) no-repeat; margin-top:15px; } #J_TB_clock_6{ margin-left: 2px; }</style><script type="text/javascript"> 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();</script></body>?