欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 12:56:13
本文实例讲述了js+css3实现的简易钟表效果。分享给大家供大家参考,具体如下: &...

本文实例讲述了js+css3实现的简易钟表效果。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net js+css3简易钟表</title>
    <style type="text/css">
      *{
        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;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="hour"></div>
      <div id="min"></div>
      <div id="sec"></div>
      <div id="point"></div>
      <ul id="circle"></ul>
    </div>
  </body>
  <script type="text/javascript">
    var hourdom=document.getelementbyid('hour');
    var mindom=document.getelementbyid('min');
    var secdom=document.getelementbyid('sec');
    var cricle=document.getelementbyid('circle');
    //创建表盘,ul宽高为wrap宽高,以wrap中心点为变换基点,动态分配6°的li
    for (var i=0;i<60;i++) {
      var li=document.createelement('li');
      cricle.appendchild(li);
      li.style.transform='rotate('+i*6+'deg)';
    }
    //延时函数,确保每一秒更新一次最新时间。并且计算时间准确值。
    setinterval(function(){
    var date=new date();
    var hour=date.gethours();
    var min=date.getminutes();
    var sec=date.getseconds();
    min+=sec/60;
    hour+=min/60;
    //当前时间*每个单位时间走的角度=指针指向
    hourdom.style.transform='rotate('+hour*30+'deg)';
    mindom.style.transform='rotate('+min*6+'deg)';
    secdom.style.transform='rotate('+sec*6+'deg)';
    },1000)
  </script>
</html>

运行效果:

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

感兴趣的朋友可使用在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun测试一下运行效果。

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

在线日期/天数计算器:

在线日期计算器/相差天数计算器:

在线日期天数差计算器:

unix时间戳(timestamp)转换工具:

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

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