当前位置:Gxlcms > html代码 > 用HTML5制作数字时钟的教程_html5教程技巧

用HTML5制作数字时钟的教程_html5教程技巧

时间:2021-07-01 10:21:17 帮助过:16人阅读

2015511172231746.png (836×306)

就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾。直到昨天同事又在网上看到这个案例,他觉得很酷炫,就跑过来问我,这个是怎么实现的,然后我大概想了一下实现方法后也来了点兴趣,就花了一点时间模仿做出来了一个。不同的是,岑安用的是div来做的。而我就是用canvas来实现的。用canvas来做性能方面会更好,因为就单单操控每个点的运动,用js控制dom的style属性跟用js控制canvas绘图相比性能方面肯定是有所欠缺的。

  先上个我做的DEMO吧,然后再简述一下做这个的方法: 看DEMO请戳我 。

  做这个思路很简单,就是通过字符串保存各个数字的位置: