Watch
<div class="watch">
<div class="cont-arrows hour">
<span class="hour-hand"></span>
</div>
<div class="cont-arrows minute">
<span class="minute-hand"></span>
</div>
<div class="cont-arrows second">
<span class="second-hand"></span>
</div>
</div>
.watch {
position: relative;
width: 280px;
height: 280px;
background-color: #FFF;
border: 12px double #E63946;
border-radius: 30px;
background-repeat: no-repeat;
background-size: 90%;
background-position: center;
background-image: url('https://i.pinimg.com/564x/25/ca/03/25ca0357d474e81a6c4da5c50acd05af.jpg');
}.cont-arrows {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}.second:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #E63946;
}.minute:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #3C162F;
}.cont-arrows span {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
}.second-hand {
top: 2%;
height: 60%;
width: 2px;
background-color: #E63946;
}.minute-hand {
top: 6%;
height: 52%;
width: 4px;
background-color: #3C162F;
}.hour-hand {
top: 25%;
height: 30%;
width: 6px;
background-color: #3C162F;
}
const sec = document.querySelector('.second');
const min = document.querySelector('.minute');
const hour = document.querySelector('.hour');
function myWatch(){
var time = new Date();
var s = time.getSeconds();
var m = time.getMinutes();
var h = time.getHours() % 12 || 12;
// Seconts
var sset = 360 / 60 * s;
sec.style.transform = 'rotate('+sset+'deg)';
// Minutes
var mset = 360 / 60 * m + 6 / 60 * s;
min.style.transform = 'rotate('+mset+'deg)';
// Hours
var hset = 360 / 12 * h + 30 / 60 * m;
hour.style.transform = 'rotate('+hset+'deg)';
}
myWatch();
setInterval(myWatch,1000);