JavaScript 30 - 2 学习笔记

学习JavaScirpt30的笔记！

有意思！

2------->   CSS clock

效果是这样的.... 这是改良过后的 版本....

话不多说，直接来看代码。

首先是html部分

<div class="clock">
        <div class="clock-face">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
        </div>
    </div>

最外层的  clock 来作为底部的圆环。

变化都是在 clock-face 里面的。

之后就是三个 div指针啦。

下面是CSS 部分

　　.clock{
 
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border:5px solid #dca;
 
    }
 
    .clock-face{
        width: 90%;
        margin: 0 auto;
        height: 300px;
        position: relative;
    }
 
    .hand{
        width: 50%;
        height: 3px;
 
        position: absolute;
        top: 50%;
        transform: rotate(-90deg);
        transform-origin: 0%;
        left: 50%;
 
        transition-timing-function: cubic-bezier(0, 1.74, 0.77, 0.87);
 
    }
 
    .second-hand{
 
        transition-duration: .05s;
        background-color:red;
    }
 
    .min-hand{
        width: 120px;
        transition-duration: .05s;
        background-color:#666;
    }
 
    .hour-hand{
        width: 100px;
        transition-duration: .05s;
        background-color:gray;
    }

最需要关注的地方就是这里

   .hand{
        width: 50%;
        height: 3px;
 
        position: absolute;
        top: 50%;
        transform: rotate(-90deg);
        transform-origin: 0%;
        left: 50%;
 
        transition-timing-function: cubic-bezier(0, 1.74, 0.77, 0.87);
 
    }

   transform-origin: 0%;

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

transform-origin: 0%;设置为0 其实就是以hand的开始部分为圆点来旋转指针。
如果我们将transform-origin 设置为50%，看看是什么样子的效果。

..整指针都是以width = 50% 的地方开始旋转的。

视频里面的  transform-origin 是100%。 因为他没有设置每个指针的长度，默认都是一样长的。所以设置为100%的话是没有什么影响的。

但是如果想要设长度，考虑到div 的  position: absolute;  的时候。 他是自动向左靠拢的。如果我们以100%的origin来设置他的话，就会出现这样的情况。

指针们并没有共用圆心。所以给origin 设置为0%，（同时要调整圆心的位置 left：50%）。

接下来看js

          const secondHand = document.querySelector('.second-hand');
          const minHand = document.querySelector('.min-hand');
          const hourHand = document.querySelector('.hour-hand');
 
          function setDate(){
                const now= new Date();
                const seconds = now.getSeconds();
                const secondsDegrees = ((seconds/60)*360-90);
 
                const mins = now.getMinutes();
                const minsDegrees=((mins/60)*360-90);
 
                const hours = now.getHours();
                const hoursDegrees=((hours/12)*360-90);
 
               if(seconds==0){
                   secondHand.style.transitionDuration='0s';
 
               }
               else{
                   secondHand.style.transitionDuration='.1s';
 
               }
 
               if(mins==0){
                   minHand.style.transitionDuration='0s';
               }else{
                   minHand.style.transitionDuration='.05s';
               }
 
               if(hours==0){
                   hourHand.transitionDuration='0s';
               }else{
                   hourHand.transitionDuration='.05s';
               }    
 
               secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
 
               minHand.style.transform = `rotate(${minsDegrees}deg)`;
 
               hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
 
                console.log(seconds);
 
          }
 
          setInterval(setDate,1000);

核心部分是这里

 const now= new Date();
 const seconds = now.getSeconds();
 const secondsDegrees = ((seconds/60)*360-90);
 
利用了js里的date 直接获取了当前的秒数（简单粗暴..）
然后计算出每次 指针的偏移量  (秒数/60s)*360°-90°；
为什么要-90°？？ 因为如果不-90°，那么这个指针的起始位置就不是12点 ，而是3点！ 
 
视频里面是+90°， 因为他使用的origin 是100%，而我使用的是 0%，两个的圆点不一样，旋转的方向是一样的。相当于我是从3点的位置开始 ，而视频里面是从9点的位置开始，
而我们都想要他从12点的位置开始，所以才需要+-90°。
 
然后用定时器每秒调用 setDate()，大家可能看到了有这样的三个判断。

 　　　　　　　　 if(seconds==0){
                   secondHand.style.transitionDuration='0s';
 
               }
               else{
                   secondHand.style.transitionDuration='.1s';
 
               }
 
               if(mins==0){
                   minHand.style.transitionDuration='0s';
               }else{
                   minHand.style.transitionDuration='.05s';
               }
 
               if(hours==0){
                   hourHand.transitionDuration='0s';
               }else{
                   hourHand.transitionDuration='.05s';
               }    

这其实是对视频里面代码的改进...因为 每次从59s-->60s 的这个时候，其实second 的值是 59-->0.而这个时候如果 继续让 transition-Duration 有值的话。

就会出现指针快速的绕了一圈的效果，影响视觉体验，所以在0s的时候把 transition-Duration 设置为0 ，可以跳过这个旋转的动画，直接过渡，之后再将其

设置回来，就可以了。

但是我觉得....这样的判断和操作会不会对浏览器的性能是一种消耗，因为其实只需要在0s的时候设置1次，1s的时候再设置回来。之后的58s内都不需要对其进行

操作...

如果有大佬有更好的写法，希望告知，谢谢~！！