欢迎来到福编程网,本站提供各种互联网专业知识!

又一款js时钟!transform实现时钟效果

发布时间:2016-08-15 作者:小数点就是问题 来源:转载
又一款js时钟!这篇文章主要为大家详细介绍了transform实现的时钟效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

又来一个时钟效果了,这个的实现不需要canvas,都是div、ul、li画出的,好玩有真实。

哈哈~

需要的js才能实现到走动这个效果,但js的内容不多,也不难。

主要是一个css里transform的使用的思路,transform里有很多变幻属性,而普通的时钟

在我心中就是个圆圆的东西,那么是不是可以旋转这个属性(rotate)实现了,它的刻度

使用旋转且把旋转点设置在圆心,那不就可以绕着圆心转了吗,而时针它们的底部不是和

圆心接触的吗,那么设置时针的底部为旋转点不就OK了,大概的说了说思路。

代码:




  
  transform
  


  

    使用标签画图最主要的是定位,因为这样我们就可以把弄到形状的盒子放到你所想要的位置,内部css样式表是可以使用获取元素的方式获取的,这样就可以使用innerHTML为其添加样式,且可以循环添加,还有因为刻度太多所以使用循环添加,这样省时省力,至于剩下的就是定时器了,给定好1秒的时间,每1秒执行一次函数,这样它就是动起来了。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

    相关推荐