Skip to content

Instantly share code, notes, and snippets.

@tovic tovic/clock.html
Created Jun 12, 2019

Embed
What would you like to do?
<style>
div {
width: 200px;
height: 200px;
background: lime;
border-radius: 100%;
position: relative;
}
span {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
z-index: 3;
}
span::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 40%;
left: 0;
background: red;
}
span + span {
width: 4px;
margin-left: -2px;
z-index: 2;
}
span + span::before {
top: 5%;
background: black;
}
span + span + span {
width: 6px;
margin-left: -3px;
z-index: 1;
}
span + span + span::before {
top: 25%;
background: black;
}
span:first-child::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
background: red;
border-radius: 100%;
}
</style>
<div>
<span></span>
<span></span>
<span></span>
</div>
<script>
var arrow = document.querySelectorAll('span');
function tick() {
var date = new Date,
h = (date.getHours() / 12) * 360,
m = (date.getMinutes() / 60) * 360,
s = (date.getSeconds() / 60) * 360;
h += m / 12;
m += s / 60;
arrow[0].style.transform = 'rotate(' + s + 'deg)';
arrow[1].style.transform = 'rotate(' + m + 'deg)';
arrow[2].style.transform = 'rotate(' + h + 'deg)';
setTimeout(tick, 1000);
}
tick();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.