.clock
.inner
.hour.hand
.minute.hand
.second.hand
.graduations
- for (var graduations = 1; graduations <= 60; graduations++)
.graduation
// ---- VARIABLES
$clockSize: 360px
$clockPadding: ($clockSize / 14.4)
$clockBackground: #F7F7F7
$innerBorderWidth: ($clockSize / 72)
$innerBorderColor: #181818
$secondHandBackgroundColor: #ec231e
// ---- DOCUMENT
html, body
height: 100%
body
display: flex
align-items: center
justify-content: center
background: linear-gradient(110deg, #D2D2D2, #F5F5F5)
*
box-sizing: border-box !important
// ---- CLOCK
.clock
width: $clockSize
height: $clockSize
padding: $clockPadding
background-color: $clockBackground
border-radius: ($clockSize / 4.5)
box-shadow: 0 18px 40px rgba(0,0,0,0.15)
.inner
position: relative
width: 100%
height: 100%
background: #fff
border: $innerBorderWidth solid $innerBorderColor
border-radius: 100%
box-shadow: 0 0 15px rgba(0,0,0,0.75) inset
.hand
position: absolute
top: 50%
left: 50%
width: ($clockSize / 50)
background-color: #181818
&.hour
height: ($clockSize / 4)
margin-top: -($clockSize / 13.2)
transform: rotate(0deg) translate(-50%, -50%)
transform-origin: 0 ($clockSize / 13.2)
&.minute
height: ($clockSize / 3)
margin-top: -($clockSize / 13.2)
transform: rotate(0deg) translate(-50%, -50%)
transform-origin: 0 ($clockSize / 13.2)
&.second
width: ($clockSize / 185)
height: ($clockSize / 3)
background-color: $secondHandBackgroundColor
margin-top: -($clockSize / 10)
box-shadow: -4px -6px 0 0 rgba(0, 0, 0, 0.15)
transform: rotate(0deg) translate(-50%, -50%)
transform-origin: 0 ($clockSize / 10)
&:before, &:after
content: ''
display: inherit
position: inherit
left: inherit
background-color: inherit
border-radius: 100%
transform: translate(-50%, -50%)
&:before
top: ($clockSize / 3.8)
width: ($clockSize / 20)
height: ($clockSize / 20)
box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.15)
&:after
top: ($clockSize / 18)
width: ($clockSize / 36)
height: ($clockSize / 36)
box-shadow: -4px -6px 2px 0 rgba(0, 0, 0, 0.15)
.graduations
.graduation
display: block
position: absolute
top: ($innerBorderWidth * 1.5)
left: 50%
width: ($clockSize / 185)
height: ($clockSize / 40)
background-color: #181818
transform: rotate(0deg) translateX(-50%)
transform-origin: 0 ((($clockSize - ($clockPadding * 2)) / 2) - ($innerBorderWidth * 3))
&:nth-child(5n-4)
width: ($clockSize / 90)
height: ($clockSize / 18)
@for $i from 1 through 60
&:nth-child(#{$i})
transform: rotate(#{( 6 * $i) - 5}deg) translateX(-50%)
/** Our wonderfull little clock **/
class Clock {
/**
* Clock initialization
*/
constructor() {
this.sound = new Audio("data:audio/wav;base64,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");
this.hourHand = document.querySelector('.hour.hand');
this.minuteHand = document.querySelector('.minute.hand');
this.secondHand = document.querySelector('.second.hand');
this.timer();
setInterval(() => this.timer(), 1000);
}
/**
* Timer of the clock
*/
timer() {
this.sethandRotation('hour');
this.sethandRotation('minute');
this.sethandRotation('second');
}
/**
* Changes the rotation of the hands of the clock
* @param {HTMLElement} hand One of the hand of the clock
* @param {number} degree degree of rotation of the hand
*/
sethandRotation(hand) {
let date = new Date(), hours, minutes, seconds, percentage, degree;
switch (hand) {
case 'hour':
hours = date.getHours();
hand = this.hourHand;
percentage = this.numberToPercentage(hours, 12);
break;
case 'minute':
minutes = date.getMinutes();
hand = this.minuteHand;
percentage = this.numberToPercentage(minutes, 60);
break;
case 'second':
seconds = date.getSeconds();
hand = this.secondHand;
percentage = this.numberToPercentage(seconds, 60);
this.sound.play();
break;
}
degree = this.percentageToDegree(percentage);
hand.style.transform = `rotate(${degree}deg) translate(-50%, -50%)`;
}
/**
* Converting a number to a percentage
* @param {number} number Number
* @param {number} max Maximum value of the number
* @return {number} Return a percentage
*/
numberToPercentage(number = 0, max = 60) {
return (number / max) * 100;
}
/**
* Converting a percentage to a degree
* @param {number} percentage Percentage
* @return {number} Return a degree
*/
percentageToDegree(percentage = 0) {
return (percentage * 360) / 100;
}
}
let clock = new Clock();
Also see: Tab Triggers