采用 kissy-core
,破除常规,不使用flash(也确实不会)
demo
实现注意点:
-1。类似数字逻辑,由逆时针编号的线条拼凑成数字,数字集合拼凑成时钟。
0。避免过度设计,最小抽象为数字,而不是构成数字的线条。
1。每个数字利用线条拼凑,棱角使用css border画出。数字抽象为类 ClockNumber,利用 attribute
机制,包括属性:内在数值value(Number类型),zoom放大倍数
2。六个clocknumber聚合成为类clock,包括属性:内在时间value(Date类型),zoom放大倍数
3。组件监听clock的value属性变化,当调用端设置clock.set("value",new Date()),clock分解出时间的各个数字并调用clocknumber的对应属性设置,使得clocknumber重绘,同理zoom属性。
4。clocknumber重绘的性能提升,编码线条状态(二进制表示)对应到数字:
例如
0:1111110 表示当画0数字时,第1,2,3,4,5,6代号的线条为显示状态,7线条为隐藏
当发生状态转移时:x -> y ,对x,y对应的线条状态二进制 bx,by做异或操作,只对变化的线条进行css隐藏或显示操作,尽可能多得将状态利用 attribute 保存在javascipt对象中,尽可能少的touch dom,关键是做好javascript对象状态同对应dom状态的同步,这也正是attribute所擅长的。
PS: ie6 放大倍数小时的解决方法
增加 zoomLimit 参数,当zoom倍数小于该值时,边角在ie下消失,全部变成直边
:
var clock = new S.DigitalClock({
container: S.one("#clock_container")[0],
zoom: S.UA.ie == 6 ? 0.17 : 0.15,
zoomLimit: S.UA.ie == 6 ? 0.2 : 0.15
});
- 大小: 3.9 KB
- 大小: 15.6 KB
- 大小: 4.5 KB
分享到:
相关推荐
主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料,动态显示系统当前时间,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
基于JavaScript的电子时钟效果实现.pdf
使用javascript代码写的一个时钟和倒计时程序
数字时钟 0-9 数字时钟图片 数字电子图片 0-9数字图片收藏!!!
数码时钟——前端页面中倒计时以及数字时钟的效果非常常见,本资源利用javascript原生实现前端页面中的数码时钟效果
本文件属于文章《如何使用js实现电子时钟功能》的完整代码,在读完原创文章之后可以下载查看代码。代码中包括基本,图片和滚动动画的三种时钟效果,html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发...
通过JS代码简单明了实现动态的显示一个钟表
简易电子时钟的设计与实现,适合前端初学者进行入门学习,可以进行页面的时间显示
css3实现网页电子时钟代码.zip
主要介绍了JavaScript电子时钟倒计时的实现代码,具有一定的参考价值,感兴趣的朋友可以参考一下
主要为大家详细介绍了javascript实现动态时钟的启动和停止文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了JavaScript电子时钟倒计时的实现代码,具有一定的参考价值,感兴趣的朋友可以参考一下
内容概要:通过html+css2D变换属性绘制时钟表盘,并通过js时间函数获取北京时间并实时... 核心内容:css的2d变换、定位;js时间函数。 能学到什么:定位的巧妙应用 阅读建议:本资源原理较为简单,适合初学者借鉴一下。
主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下 js代码 var canvas = document.getElementById(clock); var clock = canvas.getContext(2d); function zhong() { clock.save(); //开始画...
最简单的闹钟 js代码
源码使用HTML弹性盒布局结合CSS文字立体阴影及js计时器实现可爱的网页立体时钟效果,网页整体以白桃粉色为主题实现了简约大气风格的html+css+js的电子时钟效果;源码中附有详细注释说明适合初学者学习参考,该效果可...
实验二 Javascript编程基础 函数应用 1 要求输出到document对象 使用switch 实现接收输入成绩等级反馈 并统计输入人次 计算平均成绩(2)制作电子时钟 可用数字或图片表示 实验三 Javascript编程基础 事件编程 实验...
使用精美图片实现日历效果,电子时钟效果,每时每刻让你对时间了如指掌。 8. 计时器。使用自定义的计时器实现精确到毫秒的时间格式。支持开始、停止和归零。 9. 画板。界面简约纯净,支持笔触色彩切换,宽度切换,...
一个用于覆盆子pi串行端口操纵的小型电子应用程序。 盒子 覆盆子,继电器,时钟和电源 显示器背面 干净状态,不添加任何流量 点击加号添加组件 添加了一个流程 编辑流程 点击编辑图标可打开流详细信息视图 添加流量...