CSS 时钟效果
更新日期:
文章目录
效果:浏览效果
code review 了下,收获颇丰啊。一对比源码就知道差别(差距)在哪里了。
- 原始的 V1.0:原始代码
- 修改后的 V1.5 :修改后的代码
修改点:
HTML结构:
(1)不是链接的就不要随便用 a 标签
(2)命名:不 needle 和 digit,换成了通俗的 pointer 和 number
JS
(1)去掉了繁琐的 var me = this;
(2)合并循环:画线和数字时
(3)简化计算公式:画数字时
其他:
(1)trim()
(2)switch-case vs. if-else
(3)htmlArray.length vs. $.isEmptyObject(x)
(4)this.
(5)setInterval() 传参this过去-作用域上下文
目前,遗留问题:
1.用 jQuery 提供的插件形式书写,并简化 HTML 结构和配置项
(1)直接只写一个div,然后 $(‘.clock’).Clock()
(2)配置项中牵扯到选择器的,可尽量自动生成
2.时间的校验,setInterval()
(1)当网页在后台打开
(2)当网页被关闭,比如手机锁屏等
3.浏览器的兼容性