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

更新时间：2016年08月15日 08:55:46 作者：小数点就是问题

又一款js时钟!这篇文章主要为大家详细介绍了transform实现的时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

哈哈~

需要的js才能实现到走动这个效果，但js的内容不多，也不难。
主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟
在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度
使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和
圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>transform</title>
  <style id="css">
    #clock{
      width: 200px;
      height: 200px;
      border: 2px solid #000;
      border-radius: 50%;
      margin: 100px auto 0;
      position: relative;
    }
    #clock ul{
      width: 200px;
      height: 200px;
      position: relative;
      list-style: none;
      padding:0;
      margin: 0;
    }
    #clock ul li{
      width: 2px;
      height: 10px;
      background: #000;
      transform-origin: center 100px;
      position: absolute;
      top: 0;
      left: 50%;
    }
    #clock ul li:nth-of-type(5n+1){
      height: 20px;
    }  
    #hour{
      height: 40px;
      width: 4px;
      background: #00fefe;
      position: absolute;
      top: 60px;
      left: 99px;
      transform-origin:center bottom;
    }
    #min{
      height: 60px;
      width: 3px;
      background: #001afe;
      position: absolute;
      top: 40px;
      left: 99px;
      transform-origin: center bottom;
      transform: rotate(15deg);
    }
    #sec{
      height: 70px;
      width: 2px;
      background: #000;
      position: absolute;
      top: 30px;
      left: 99px;
      transform-origin:center bottom;
    }
    #dot{
      width: 10px;
      height: 10px;
      position: absolute;
      left: 95px;
      top: 95px;
      background: #aaa;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="clock">
    <ul></ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="dot"></div>
  </div>
  <script>
    var oCss=document.getElementById("css"); 
    var oClock=document.getElementById("clock");
    var oUl=oClock.getElementsByTagName("ul")[0];
    var oHour=document.getElementById("hour");
    var oMin=document.getElementById("min");
    var oSec=document.getElementById("sec");
    var strLi="";
    var strCss="";
    for(var i=0;i<60;i++){
      strLi+="<li></li>";
    }
    oUl.innerHTML=strLi;
    for(var i=0;i<60;i++){
      strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';
    }
    oCss.innerHTML+=strCss;
    time();
    setInterval(time,1000);
    function time(){
    var date=new Date();
    var h=date.getHours();
    var m=date.getMinutes();
    var s=date.getSeconds();

    oHour.style.transform="rotate("+(h+m/60)*30+"deg)";
    oMin.style.transform="rotate("+(m+s/60)*6+"deg)";
    oSec.style.transform="rotate("+s*6+"deg)";
    }
  </script>
</body>
</html>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js showModalDialog参数的使用详解
本篇文章主要是对js中showModalDialog参数的使用进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
JS实现简单网页倒计时器
这篇文章主要为大家详细介绍了JS实现简单网页倒计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
JS实现随机抽选获奖者
这篇文章主要介绍了JS实现随机抽选获奖者，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
TBCompressor js代码压缩
公司原先的JS和CSS文件都是用在线压缩程序压缩的，看似方便，但很容易出错，可能是压缩程序把CSS里面的一些Hack语句给混淆了，于是我决定用大名鼎鼎的YUI compressor。
2011-01-01
微信小程序全选多选效果实现代码解析
这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
js兼容的placeholder属性详解
这篇文章详细介绍了js兼容的placeholder属性，有需要的朋友可以参考一下
2013-08-08
从Immutable.js到Redux函数式编程
这篇文章主要为大家介绍了从Immutable.js到Redux函数式编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
深入浅析JavaScript中的作用域和上下文
javascript中的作用域(scope)和上下文(context)是这门语言的独到之处，这部分归功于他们带来的灵活性。本文给大家介绍JavaScript中的作用域和上下文，感兴趣的朋友一起学习
2016-03-03
JavaScript设计模式之工厂模式和构造器模式
这篇文章主要介绍了JavaScript设计模式之工厂模式和构造器模式,本文同时讲解了设计模式的类别如创建型设计模式、结构型设计模式、行为设计模式等内容,需要的朋友可以参考下
2015-02-02
JavaScript Map 和 Object 的区别解析
在JavaScript中，Map 和 Object 看起来都是用键值对来存储数据，那么他们有什么不同呢，这篇文章主要介绍了JavaScript Map 和 Object 的区别,需要的朋友可以参考下
2022-08-08