SCSS
//variables
$bg: #ddd;
$main: #464646;
$other: #646664;
$white: #fff;
body{
background-color: $bg;
}
.hands{
height: 300px;
width: 300px;
position: relative;
padding: 0;
margin: 10% auto;
.hand{
width: 50%;
height: 7px;
position: absolute;
top: 50%;
background-color: $white;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
border-radius: 10px;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.hand-hour{
background-color: $main;
}
.hand-min{
background-color: $other;
}
.hand-sec{
}
}
.clock{
height: 360px;
width: 360px;
margin: 10% auto;
border: 15px solid #fff;
border-radius: 100%;
background-color: $bg;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
ES6
'use strict';
var secondHand = document.querySelector('.hand-sec');
var minuteHand = document.querySelector('.hand-min');
var hourHand = document.querySelector('.hand-hour');
function setDate() {
var now = new Date();
var secs = now.getSeconds();
var secondsDegrees = secs / 60 * 360 + 90;
secondHand.style.transform = 'rotate(' + secondsDegrees + 'deg)';
var mins = now.getMinutes();
var minsDegrees = mins / 60 * 360 + 90;
minuteHand.style.transform = 'rotate(' + minsDegrees + 'deg)';
var hour = now.getHours();
var hoursDegrees = hour / 60 * 360 + 90;
hourHand.style.transform = 'rotate(' + hoursDegrees + 'deg)';
}
setInterval(setDate, 1000);
