最近项目里需要一个时钟控件,不是那种可以选择日期的,只是一个钟摆。从网上找了个控件。尊重作者,原文地址为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了。
我把原版的和修改过的都放在附件里了,有需要的朋友可以拿下去用。再次感谢原作者。
- 大小: 29.5 KB
分享到:
相关推荐
网页中经典的带时分秒的时钟控件,我们有时候在编写网页的时候经常会有需要时分秒的需求,本控件通过修改js配置能够随意改变想要的时间格式
asp.net 获取服务器的时间,并在客户端显示时钟,搞了半天才搞好的! 使用前请加载 ext.core,如果不加载ext.core可把js代码稍作修改.
随鼠标飞舞的时钟,彩色动人,可以自己在基础上修改效果.
纯Javascript+DIV+CSS制作的俄罗斯方块 里面包含时钟模块 源代码可以任意修改
node.js-clock时钟web服务器案例,自行修改URL路径
动画效果非常炫酷的时钟效果,采用翻页的形式,可以通过修改css来设计样式
html5实现时钟效果的插件,可以通过修改参数,修改样式
这是“罗盘时钟”星空版的全部源代码,具体效果我在博客中已经展示了,还不错,可以根据背景,自己随便再去修改哈!需要的朋友可以下载!!!
基于HTML5实现的时钟效果,利用canvas实现的时钟效果,代码清晰,可根据自己爱好修改样式,可供参考使用
这是一个简易的网页版的翻页时钟,可以自行更改里面的内容,是源代码,html文件可直接打开,需要在浏览器打开,如果IE浏览器不行的话,就用其他的浏览器。
使用jQuery和javascript创建时钟
JS-CSS-时钟JS-CSS-Clock是使用JS和CSS制成的模拟时钟。演示版这是一个正在工作的现场演示: : 贡献拉请求是受欢迎的。 对于重大更改,请先打开一个问题以讨论您要更改的内容。错误/功能要求如果您发现错误(网站...
非常实用的特效代码,可以完美运行,可以二次修改!
非常实用好看的特效代码,可以完美运行,可以二次修改!
该项目是一个包含多个前端技术Demo的精选集合。...项目中的Demo覆盖了各种主题,比如手势锁实现、动态按钮效果、画布应用、时钟设计、组件收集等。每个示例都附有详细的代码和注释,方便用户学习和修改。。
#创建一个 JavaScript 时钟 在第 1 部分中,我们创建了一个基本的 JavaScript 时钟。 在第 2 部分中,我们将其修改为显示为十六进制颜色,并在每个秒刻度处将背景颜色更改为该十六进制颜色。 可以在这里看到一个工作...
Javascript Canvas Clock of Clocks 由较小的“时钟”组成的时钟的画布动画。 见 最初受到来自启发 执照 麻省理工学院许可证 (MIT) 版权所有 (c) 2013 Conor Hunt - 特此授予任何人免费获得本软件副本和相关...
配置:使用您喜欢的文本编辑器打开文件,然后更改所有必填字段。 跑步: 打开您的终端或命令提示符,或称其为任何名称,导航( cd )到克隆的存储库; 运行node index.js或npm start ; 好吧,从技术上讲,您...
非常实用好看的特效代码,完美运行,可以二次修改!