Flat Color Clock
HTML
<body class="color_clock">
<div class="wrap">
<div class="container">
<h1 class="time_title">The current time is</h1>
<div class="ticker">
<div class="current" id="current_hour"></div>
<div class="off time" >03</div>
<div class="off time" >4</div>
<div class="off time" >5</div>
<div class="off time" >6</div>
<div class="off time" >7</div>
<div class="off time" >8</div>
<div class="off time" >9</div>
<div class="off time" >0</div>
<div class="off time" >1</div>
<div class="off time" >12</div>
</div>
<div class="colon">:</div>
<div class="ticker">
<div class="current" id="current_min"></div>
<div class="off time">03</div>
<div class="off time">24</div>
<div class="off time">35</div>
<div class="off time">46</div>
<div class="off time">57</div>
<div class="off time">8</div>
<div class="off time">9</div>
<div class="off time">0</div>
<div class="off time">1</div>
<div class="off time">12</div>
</div>
<div class="colon">:</div>
<div class="ticker">
<div class="current" id="current_sec"></div>
<div class="off time" >03</div>
<div class="off time" >24</div>
<div class="off time" >35</div>
<div class="off time" >46</div>
<div class="off time" >57</div>
<div class="off time" >8</div>
<div class="off time" >9</div>
<div class="off time" >0</div>
<div class="off time" >1</div>
<div class="off time" >12</div>
</div>
<hr class="divider">
<h1 class="color_title">The current color is</h1>
<div class="ticker" id="color_ticker">
<div class="current" id="current_color"></div>
<div class="off color">AAAAAA</div>
<div class="off color">BBBBBB</div>
<div class="off color">CCCCCC</div>
<div class="off color">DDDDDD</div>
<div class="off color">EEEEEE</div>
<div class="off color">FFFFFF</div>
<div class="off color">111111</div>
<div class="off color">222222</div>
<div class="off color">333333</div>
<div class="off color">444444</div>
<div class="off color">555555</div>
<div class="off color">666666</div>
<div class="off color">777777</div>
<div class="off color">888888</div>
<div class="off color">999999</div>
<div class="off color">000000</div>
</div>
</div>
</div>
</body>
CSS
body {
min-height: 100%;
position: relative;
font-family: 'Montserrat', sans-serif;
background-color: #000;
color: white;
}
h1 {
font-size: 30px;
padding: 40px 0;
text-transform: uppercase;
}
.time_title {
padding-bottom: 14px;
}
.wrap {
height: 500px;
}
.container {
position: relative;
width: 700px;
margin: 40px auto;
text-align: center;
}
.ticker {
position: relative;
font-family: 'Montserrat', sans-serif;
display: inline-block;
font-size: 80px;
}
.colon {
display: inline-block;
font-size: 100px;
margin: 0 20px;
}
.off {
position: absolute;
top: 0;
color: rgba(255,255,255,0.0);
opacity: 0.6;
z-index: 1;
}
.time {
right: 0;
}
.current {
position: relative;
z-index: 10;
}
#color_ticker {
position: absolute;
left: 50%;
top: 110%;
transform: translate(-50%, -50%);
}
.color {
left: 0;
}
.divider {
margin-top: 40px;
margin-bottom: 0;
height: 10px;
background: #fff;
border: none;
}
JAVASCRIPT
$(document).ready(function () {
function time() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var color = timeColor(hour, min, sec);
if (hour > 12) {
hour = hour - 12;
};
hour = formatTime(hour);
min = formatTime(min);
sec = formatTime(sec);
$('#current_hour').text(hour);
$('#current_min').text(min);
$('#current_sec').text(sec);
$('body').css('background-color', '#' + color);
$('#current_color').text(color);
t=setTimeout(function(){time()}, 500);
}
function formatTime(i) {
if (i < 10) {
i = '0' + i;
}
return i;
}
function formatColor(i) {
if (i.length < 2) {
i = '0' + i;
}
return i;
}
function timeColor(hour, min, sec) {
red = Math.round(255 * (hour / 23)).toString(16);
green = Math.round(255 * (min / 59)).toString(16);
blue = Math.round(255 * (sec / 59)).toString(16);
red = formatColor(red);
green = formatColor(green);
blue = formatColor(blue);
return (red + green + blue).toUpperCase();
}
time();
});
