Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- CSS + JS Clock Notes:
- In order to get two lines to pivot off of the end of each other's x-axis (i.e. the second/minute/hour hands of a clock),
- give each instance of the .hand class the attribute "transform-origin: 100%;"
- Problem: div's go left-to-right, so the clock won't start at 90 degrees.
- Solution: give .hand an attribute of "transform: rotate(90deg);"
- Question: How to mimic a mechanical clock's tick-and-stop motion?
- Answer: give .hand an attribute of "transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
- The parameters for the cubic-bezier are selected by clicking the icon and pulling the bottom purple button all the way up.
- Lastly: to make the "ticks" near-instantaneous, give .hand an attribute of "transition: all 0.05s;"
- Lines 3-13 provide the logic for _how_ the hands move. From here on, the code regulates _when_ they move.
- Within <script> tags, first select the secondHand element, then pass it into a function which determines its placement:
- 1) const secondHand = document.querySelector('.second-hand');
- 2) function setDate() {
- const now = new Date(); //creates new Date object
- const seconds = now.getSeconds(); //gets current second from Date object
- const secondsDegrees = ((seconds / 60) * 360) + 90; //calculates the angle the second hand should hold (and corrects for line 6)
- secondHand.style.transform = `rotate(${secondsDegrees}deg)` //rotates the second hand.
- }
- Repeat for minutes and hours. Write both of these above setDate()
- const minsHand = document.querySelector('.min-hand');
- const hourHand = document.querySelector('.hour-hand');
- Now within setDate() function, add the following blocks:
- const minutes = now.getMinutes();
- minuteDegrees = ((minutes/60) * 360) + 90;
- minsHand.style.transform = `rotate(${minuteDegrees}deg)`
- const hours = now.getHour();
- hourDegrees = ((hours/12) * 360) + 90;
- hourHand.style.transform = `rotate(${hourDegrees}deg)`
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement