Skip to content

Instantly share code, notes, and snippets.

@pcostesi
Last active Mar 30, 2021
Embed
What would you like to do?
<html>
<head>
<style>
.clock {
border-radius: 5rem;
width: 5rem;
height: 5rem;
border: 5px solid grey;
position: relative;
}
.clock .hand {
border-radius: 6px;
border: 3px solid grey;
height: 2rem;
position: absolute;
bottom: 50%;
left: calc(50% - 3px);
transform: rotateZ(0) translateY(3px);
transform-origin: bottom center;
}
.clock .hand.hour {
height: 1rem;
transform: rotateZ(0) translateY(3px);
transform-origin: bottom center;
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div>
<script>
const clocky = (timestamp) => {
const updateHand = (hand, deg) =>
hand.style.transform = `rotateZ(${deg}deg) translateY(3px)`;
const now = new Date()
const offset = now.getTimezoneOffset()
const minutes = (now / 1000 / 60) % 60
const hours = ((now / 1000 /60 - offset) / 60) % 24
const hourHands = [...document.querySelectorAll('.hand.hour')]
const minuteHands = [...document.querySelectorAll('.hand.minute')]
hourHands.forEach(hand => updateHand(hand, Math.floor(hours * 360 / 12)))
minuteHands.forEach(hand => updateHand(hand, Math.floor(minutes * 360 / 60)))
window.requestAnimationFrame(clocky)
}
window.requestAnimationFrame(clocky)
</script>
<body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment