Skip to content

Instantly share code, notes, and snippets.

@categulario

categulario/clock.html

Created October 3, 2014 14:22
Show Gist options
  • Save categulario/87e35fb25a7f6ed9aef1 to your computer and use it in GitHub Desktop.
Save categulario/87e35fb25a7f6ed9aef1 to your computer and use it in GitHub Desktop.
Download ZIP
A simple html clock (requires moment.js, jquery.js)
Raw
clock.html
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Clock</title>
<style type="text/css">
.hero-circle{
width:180px;
height:180px;
position:relative;
border:8px solid #B96B6B;
border-radius:50%;
box-shadow:0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3);
}
.hero-face{
width:100%;
height:100%;
}
.hero-face:after{
position:absolute;
top:50%;
left:50%;
width:12px;
height:12px;
margin:-6px 0 0 -6px;
background:#B96B6B;
border-radius:6px;
content:"";
display:block;
}
.hero-hour{
width:0;
height:0;
position:absolute;
top:50%;
left:50%;
margin:-4px 0 -4px -25%;
padding:4px 0 4px 25%;
background:#B96B6B;
-webkit-transform-origin:100% 50%;
-ms-transform-origin:100% 50%;
transform-origin:100% 50%;
border-radius:4px 0 0 4px;
}
.hero-minute{
width:0;
height:0;
position:absolute;
top:50%;
left:50%;
margin:-40% -3px 0;
padding:40% 3px 0;
background:#B96B6B;
-webkit-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
transform-origin:50% 100%;
border-radius:3px 3px 0 0;
}
.hero-second{
width:0;
height:0;
position:absolute;
top:50%;
left:50%;
margin:-40% -1px 0 0;
padding:40% 1px 0;
background:#B96B6B;
-webkit-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
transform-origin:50% 100%;
}
</style>
</head>
<body>
<div class="hero-circle">
<div class="hero-face">
<div id="hour" class="hero-hour"></div>
<div id="minute" class="hero-minute"></div>
<div id="second" class="hero-second"></div>
</div>
</div>
<script src="static/js/jquery.js"></script>
<script src="static/js/moment.js"></script>
<script>
function updateClock() {
var now = moment(),
second = now.seconds() * 6,
minute = now.minutes() * 6 + second / 60,
hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
$('#hour').css("transform", "rotate(" + hour + "deg)");
$('#minute').css("transform", "rotate(" + minute + "deg)");
$('#second').css("transform", "rotate(" + second + "deg)");
}
function timedUpdate () {
updateClock();
setTimeout(timedUpdate, 1000);
}
timedUpdate();
</script>
</body>
</html>
@AquariusFR
Copy link

Thanks, exactly what i needed.

@damiththa
Copy link

Thanks, exctly what I was looking for.
here I made a codepen for easy preview, http://codepen.io/damiththa/pen/LpMrdE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment