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

本文实例讲述了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.jb51.net/code/HtmlJsRun测试一下运行效果。

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

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

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

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

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

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

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