Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 4, 2016 06:02
Show Gist options
  • Save anonymous/1e5ee6a728d91ca0fc96b5f5044553ea to your computer and use it in GitHub Desktop.
Save anonymous/1e5ee6a728d91ca0fc96b5f5044553ea to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/gegoyarine
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.clock {
border: 1px solid black;
width: 400px;
height: 400px;
position: relative;
border-radius: 50%;
background: white;
}
.hand {
position: absolute;
transform-origin: center bottom;
transition: all 0.15s cubic-bezier(.75,.35,.63,1.56);
}
.second {
background: red;
width: 2px;
height: 190px;
left: 50%;
bottom: 200px;
margin-left: -1px;
}
.minute {
background: steelblue;
width: 10px;
height: 150px;
left: 50%;
bottom: 200px;
margin-left: -5px;
}
.hour {
background: black;
width: 18px;
height: 100px;
left: 50%;
bottom: 200px;
margin-left: -9px;
}
.digit {
position: absolute;
font-size: 2em;
font-family: monospace;
width: 2rem;
height: 2rem;
text-align: center;
color: lightblue;
}
.d-12 {
left: 50%;
margin-left: -1rem;
}
.d-3, .d-9 {
top: 50%;
margin-top: -1rem;
}
.d-3 {
right: 0
}
.d-9 {
left: 0;
}
.d-6 {
bottom: 0;
left: 50%;
margin-left: -1rem;
}
</style>
</head>
<body>
<div class="clock">
<div class="digit d-12">12</div>
<div class="digit d-3">3</div>
<div class="digit d-6">6</div>
<div class="digit d-9">9</div>
<div class="hour hand"></div>
<div class="minute hand"></div>
<div class="second hand"></div>
</div>
<script id="jsbin-javascript">
setInterval(function(){
var time = new Date();
var second = time.getSeconds();
var secondHand = second * 6;
document.querySelector('.second').style.transform = 'rotate(' + secondHand + 'deg)';
var minute = time.getMinutes();
var minuteHand = minute * 6;
document.querySelector('.minute').style.transform = 'rotate(' + minuteHand + 'deg)';
var hour = time.getHours() % 12;
var hourHand = hour * 30;
document.querySelector('.hour').style.transform = 'rotate(' + hourHand + 'deg)';
}, 1000);
</script>
<script id="jsbin-source-css" type="text/css">.clock {
border: 1px solid black;
width: 400px;
height: 400px;
position: relative;
border-radius: 50%;
background: white;
}
.hand {
position: absolute;
transform-origin: center bottom;
transition: all 0.15s cubic-bezier(.75,.35,.63,1.56);
}
.second {
background: red;
width: 2px;
height: 190px;
left: 50%;
bottom: 200px;
margin-left: -1px;
}
.minute {
background: steelblue;
width: 10px;
height: 150px;
left: 50%;
bottom: 200px;
margin-left: -5px;
}
.hour {
background: black;
width: 18px;
height: 100px;
left: 50%;
bottom: 200px;
margin-left: -9px;
}
.digit {
position: absolute;
font-size: 2em;
font-family: monospace;
width: 2rem;
height: 2rem;
text-align: center;
color: lightblue;
}
.d-12 {
left: 50%;
margin-left: -1rem;
}
.d-3, .d-9 {
top: 50%;
margin-top: -1rem;
}
.d-3 {
right: 0
}
.d-9 {
left: 0;
}
.d-6 {
bottom: 0;
left: 50%;
margin-left: -1rem;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">setInterval(function(){
var time = new Date();
var second = time.getSeconds();
var secondHand = second * 6;
document.querySelector('.second').style.transform = 'rotate(' + secondHand + 'deg)';
var minute = time.getMinutes();
var minuteHand = minute * 6;
document.querySelector('.minute').style.transform = 'rotate(' + minuteHand + 'deg)';
var hour = time.getHours() % 12;
var hourHand = hour * 30;
document.querySelector('.hour').style.transform = 'rotate(' + hourHand + 'deg)';
}, 1000);</script></body>
</html>
Raw
jsbin.gegoyarine.css
.clock {
border: 1px solid black;
width: 400px;
height: 400px;
position: relative;
border-radius: 50%;
background: white;
}
.hand {
position: absolute;
transform-origin: center bottom;
transition: all 0.15s cubic-bezier(.75,.35,.63,1.56);
}
.second {
background: red;
width: 2px;
height: 190px;
left: 50%;
bottom: 200px;
margin-left: -1px;
}
.minute {
background: steelblue;
width: 10px;
height: 150px;
left: 50%;
bottom: 200px;
margin-left: -5px;
}
.hour {
background: black;
width: 18px;
height: 100px;
left: 50%;
bottom: 200px;
margin-left: -9px;
}
.digit {
position: absolute;
font-size: 2em;
font-family: monospace;
width: 2rem;
height: 2rem;
text-align: center;
color: lightblue;
}
.d-12 {
left: 50%;
margin-left: -1rem;
}
.d-3, .d-9 {
top: 50%;
margin-top: -1rem;
}
.d-3 {
right: 0
}
.d-9 {
left: 0;
}
.d-6 {
bottom: 0;
left: 50%;
margin-left: -1rem;
}
Raw
jsbin.gegoyarine.js
setInterval(function(){
var time = new Date();
var second = time.getSeconds();
var secondHand = second * 6;
document.querySelector('.second').style.transform = 'rotate(' + secondHand + 'deg)';
var minute = time.getMinutes();
var minuteHand = minute * 6;
document.querySelector('.minute').style.transform = 'rotate(' + minuteHand + 'deg)';
var hour = time.getHours() % 12;
var hourHand = hour * 30;
document.querySelector('.hour').style.transform = 'rotate(' + hourHand + 'deg)';
}, 1000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment