最近项目里需要一个时钟控件,不是那种可以选择日期的,只是一个钟摆。从网上找了个控件。尊重作者,原文地址为http://www.ayuelee.cn/javascript-clock.html
但是这个控件不支持IE。至少在原文提供的包里的文件不行。我看了下源码,代码有支持IE的效果,不知道作者太累了还是大意了,有个地方,一个很小的问题,使得它不能够在ie下工作。我认为出错的地方是这里:
cb.innerHTML= [ /*1*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+clockbg.src+');width:'+cw+';height:'+ch+'px;"></div></div>', /*1*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+hourhand.src+');width:'+hourhand.width +';height:'+hourhand.height+'px;"></div></div>', /*2*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+minhand.src+');width:'+minhand.width +';height:'+minhand.height+'px;"></div></div>', /*3*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+sechand.src+');width:'+sechand.width +';height:'+sechand.height+'px;"></div></div>', /*4*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;cursor:hand;corsor:pointer;">1<div '+s2+clock_mask.src+');width:'+clock_mask.width +';height:'+clock_mask.height+'px;"></div></div>', ].join("");
?具体出错原因很简单,大家alert一下就知道了,width后面少了单位px.只要加上单位就可以了,IE8测试通过。
不得不说这个时钟做的很细致,至少在类别上还算很细。
修改后就是这样:
cb.innerHTML= [ /*1*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+clockbg.src+');width:'+cw+'px;height:'+ch+'px;"></div></div>', /*1*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+hourhand.src+');width:'+hourhand.width+'px ;height:'+hourhand.height+'px;"></div></div>', /*2*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+minhand.src+');width:'+minhand.width+'px ;height:'+minhand.height+'px;"></div></div>', /*3*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+sechand.src+');width:'+sechand.width+'px; height:'+sechand.height+'px;"></div></div>', /*4*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;cursor:hand;corsor:pointer;">1<div '+s2+clock_mask.src+');width:'+clock_mask.width+'px; height:'+clock_mask.height+'px;"></div></div>', ].join("");?
这样就ok了。
我把原版的和修改过的都放在附件里了,有需要的朋友可以拿下去用。再次感谢原作者。
1 楼
libmw
2010-12-10
我的ie6还是不行……
2 楼
夜之son
2010-12-10
libmw 写道
我的ie6还是不行……
try{
IEClock();
alert("请使用现代的浏览器,本业务不支持古老的IE6,谢谢合作");
}catch(e){PoorClock();};
加上这句。。。。。。呵呵
3 楼
liuxiang_in_ncs
2011-08-11
Clock.js中,时钟算法,应该改成
var hoursAngle = ((now.getHours()+now.getMinutes()/60)%12)/12*360 + 180 ;
而不是
var hoursAngle = (now.getHours()%12)/12*360 + 180 ;
IE中,还需要
/*4*/处
/*4*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;cursor:hand;corsor:pointer;">1<div '+s2+clock_mask.src+');width:'+clock_mask.width+'px;height:'+clock_mask.height+'px;"></div></div>',
var hoursAngle = ((now.getHours()+now.getMinutes()/60)%12)/12*360 + 180 ;
而不是
var hoursAngle = (now.getHours()%12)/12*360 + 180 ;
IE中,还需要
/*4*/处
/*4*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;cursor:hand;corsor:pointer;">1<div '+s2+clock_mask.src+');width:'+clock_mask.width+'px;height:'+clock_mask.height+'px;"></div></div>',
4 楼
夜之son
2011-08-11
liuxiang_in_ncs 写道
Clock.js中,时钟算法,应该改成
var hoursAngle = ((now.getHours()+now.getMinutes()/60)%12)/12*360 + 180 ;
而不是
var hoursAngle = (now.getHours()%12)/12*360 + 180 ;
IE中,还需要
/*4*/处
/*4*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;cursor:hand;corsor:pointer;">1<div '+s2+clock_mask.src+');width:'+clock_mask.width+'px;height:'+clock_mask.height+'px;"></div></div>',
var hoursAngle = ((now.getHours()+now.getMinutes()/60)%12)/12*360 + 180 ;
而不是
var hoursAngle = (now.getHours()%12)/12*360 + 180 ;
IE中,还需要
/*4*/处
/*4*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;cursor:hand;corsor:pointer;">1<div '+s2+clock_mask.src+');width:'+clock_mask.width+'px;height:'+clock_mask.height+'px;"></div></div>',
已经转到android开发了,之前看别人代码玩玩的。那些代码我都看不懂了。