Skip to content

Instantly share code, notes, and snippets.

@pcostesi

pcostesi/index.html

Last active March 30, 2021 19:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pcostesi/8fe7f806eba14198c1aa3e9cea901ad2 to your computer and use it in GitHub Desktop.
Save pcostesi/8fe7f806eba14198c1aa3e9cea901ad2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<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