JS+CSS3实现的简易钟表效果示例

这篇文章主要介绍了JS+CSS3实现的简易钟表效果,涉及JavaScript结合定时器的页面元素动态设置与数值计算相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS+CSS3实现的简易钟表效果。分享给大家供大家参考，具体如下：

    *{ margin: 0; padding: 0; } #wrap{ width: 300px; height: 300px; background-color: aliceblue; margin: 200px auto; position: relative; box-sizing: border-box; } #wrap > div{ position: absolute; top: 50%; left: 50%; } #hour{ width: 6px; height: 60px; background-color: #000000; margin: -60px -3px; transform-origin: 3px 60px; } #min{ width: 4px; height: 80px; background-color: #000000; margin: -80px -2px; transform-origin: 2px 80px; } #sec{ width: 2px; height: 100px; background-color: red; margin: -100px -1px; transform-origin: 1px 100px; } #point{ width: 20px; height: 20px; background-color: burlywood; margin: -10px -10px; border-radius: 50%; } #circle{ width: 300px; height: 300px; position: relative; } #circle li{ list-style: none; width: 2px; height: 6px; background-color: #000000; position: absolute; transform-origin: 1px 150px; left: 149px; top: 0px; }   

运行效果：

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.html.cn/code/HtmlJsRun测试一下运行效果。

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线日期/天数计算器：
http://tools.html.cn/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器：
http://tools.html.cn/jisuanqi/datecalc

在线日期天数差计算器：
http://tools.html.cn/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具：
http://tools.html.cn/code/unixtime

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上就是JS+CSS3实现的简易钟表效果示例的详细内容，更多请关注本站其它相关文章！