JavaScript 30-2 Learning Notes

Learn JavaScirpt30 's notes!

Interesting!

2-------> CSS clock

The effect is this .... This is the modified version ....

Don't talk much, just look at the code.

The first is the HTML section

<Divclass= "Clock">        <Divclass= "Clock-face">            <Divclass= "Hand Hour-hand"></Div>            <Divclass= "Hand Min-hand"></Div>            <Divclass= "Hand Second-hand"></Div>        </Div>    </Div>

The outermost clock is used as the bottom ring.

The change is in the clock-face.

Then there are three div pointers.

Here is the CSS section

. 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; }

This is where the most attention is needed.

   . 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%;

The Transform-origin property allows you to change the position of the transform element.

The X and y axes of the element can be changed by the element. The 3D transformation element can also change the z axis of an element.

transform-origin:0%, set to 0, is to rotate the pointer at the beginning of the hand as a dot.
If we set Transform-origin to 50%, see what the effect looks like.

.. The entire pointer starts to rotate at width = 50%.

The transform-origin inside the video is 100%. Because he doesn't set the length of each pointer, the default is the same as long. So setting it to 100% has no effect.

But if you want to set the length, consider the position:absolute of the Div ; The time. He is automatic to the left. If we set him up with the origin of 100%, that would happen.

The pointers do not share the center of the circle. So set origin to 0%, (and adjust the position of the center left:50%).

Next look at JS

Const SECONDHAND = Document.queryselector ('. Second-hand ')); Const Minhand= Document.queryselector ('. Min-hand ')); Const Hourhand= Document.queryselector ('. Hour-hand ')); functionsetDate () {Const now=NewDate (); 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);

The core part is here

Const now= New Date (), const seconds = now.getseconds (), const Secondsdegrees = ((SECONDS/60) *360-90);

Using the date in JS to directly get the current number of seconds (simple rude. ）
The offset of each pointer  (number of seconds/60s) is then computed *360°-90°;


The video inside is +90°, because he uses Origin is 100%, and I use 0%, two dots are not the same, the direction of rotation is the same. That's the equivalent of starting at 3, and the video is starting at 9.
And we all want him to start at 12 o ' +-90°.

SetDate (), you may see that there are three judgments.

  　　　　　　　　  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 '; }    

This is actually the improvement of the code inside the video ... Because each time from 59s-->60s this time, actually second value is 59-->0. And this time if you continue to let transition-duration have value.

There will be a quick loop around the effect of the pointer, affecting the visual experience, so at 0s when the transition-duration set to 0, you can skip the rotation of the animation, the direct transition, and then the

Set it back, it's ready.

But I think .... Such judgment and operation will not be a performance of the browser is a consumption, because in fact, only need to set 1 times in 0s, 1s and then set back. No need to do it in the next 58s

Operation...

If the big guy has a better writing, want to tell, thank you ~!!

JavaScript 30-2 Learning Notes