2018/2/5 定时与旋转原理

1. 节点        网页是有很多的节点组成的  。

    元素节点   指的是 ：  标签     li span

    文本节点      属性节点

    父子兄弟    父   parentNode        nextSibling

    孩子    childNodes        nodeType == 1  来判断是否是 元素节点

<ul>

    <li>

        》》》》

        最喜欢用的  children    只得到   元素节点

        1.获取节点属性    getAttribute（“title”）

        2.设置节点属性    setAttribute (“class”,”one”)

        3.删除节点属性    removeAttribute(“title”)；

        4. 日期函数   Date();

        声明:  var  date = new Date();

        使用:  得到现在的年分    date.getFullYear();

        月份:  date.getMonth();

        日子;  date.getDate();

        星期：  date.getDay();

        5. 定时器

        定时器  不需要人工操作   按照一定的时间进行某种动作。

        setInterval(“函数”,间隔时间 )   每隔 n秒去执行一次函数

 

2.  时钟案例

   分两步进行的。

   第一步：  要得到现在的 时 分 秒

   但是这里面有一个小玄机。

   比如现在是 9点整      时针指向 9 是没错的

   但是如果现在是 9点半   时针应该指向的是 9到10 之间 才对

   所以，我们不但要得到现在的小时，还要得到 已经过去了多少分

   ms = date.getMilliseconds(); // 现在的毫秒数

   s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s

   m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟

   h = date.getHours() % 12 + m / 60 ;

 

   旋转角度原理

   秒针     一秒 走多少度呢 ？

   一圈  360 °    一共有 60 秒       每秒  6 °

   分针     一圈 360    一圈走 60次   每次 6°  每分钟 6°

   时针     一圈 360      一共 12 个 表盘没有24小时    每个小时走  30°

完整代码：
  <script>
   var hour = document.getElementById("hour");
   var minute = document.getElementById("minute");
   var second = document.getElementById("second");
     // 开始定时器
    var s = 0,m = 0, h = 0, ms = 0;
     setInterval(function() {
              // 内容就可以了
            var date = new Date();  // 得到最新的时间
             ms = date.getMilliseconds(); // 现在的毫秒数
             s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
             m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
             h = date.getHours() % 12 + m / 60 ;
             // console.log(h);
             // 旋转角度
            // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
             second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
                          //  变化            旋转    deg  度
             minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
             hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
             second.style.MozTransform = "rotate("+ s*6 +"deg)";
                          //  变化            旋转    deg  度
             minute.style.MozTransform = "rotate("+ m*6 +"deg)";
             hour.style.MozTransform = "rotate("+ h*30 +"deg)";

         },30);
  </script>