Skip to content

Instantly share code, notes, and snippets.

@nickone48 nickone48/index.html
Created Jun 12, 2019

Embed
What would you like to do?
ColorClock CeasColor // source https://jsbin.com/weqonet
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico&display=swap" rel="stylesheet">
<meta name="description" content="CeasColor">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ColorClock</title>
<style id="jsbin-css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#clock {
font-family: 'Lobster', cursive;
font-size:144px;
margin-top: -72 x;
text-align: center;
position: relative;
bottom: -50%;
}
</style>
</head>
<body>
<div id="clock">12:13:14</div>
<script id="jsbin-javascript">
function colorClock(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours <= 9) {
hours = '0' + hours;
}
if (minutes <= 9) {
minutes = '0' + minutes;
}
if (seconds <= 9) {
seconds = '0' + seconds;
}
var clockFace = hours + ':' + minutes + ':' + seconds;
var hexColor = '#' + hours + minutes + seconds;
document.getElementById('clock').innerHTML = clockFace;
document.body.style.background = hexColor;
setTimeout(function() {
colorClock();
}, 1000);
}
colorClock();
</script>
<script id="jsbin-source-css" type="text/css">* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#clock {
font-family: 'Lobster', cursive;
font-size:144px;
margin-top: -72 x;
text-align: center;
position: relative;
bottom: -50%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function colorClock(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours <= 9) {
hours = '0' + hours;
}
if (minutes <= 9) {
minutes = '0' + minutes;
}
if (seconds <= 9) {
seconds = '0' + seconds;
}
var clockFace = hours + ':' + minutes + ':' + seconds;
var hexColor = '#' + hours + minutes + seconds;
document.getElementById('clock').innerHTML = clockFace;
document.body.style.background = hexColor;
setTimeout(function() {
colorClock();
}, 1000);
}
colorClock();</script></body>
</html>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#clock {
font-family: 'Lobster', cursive;
font-size:144px;
margin-top: -72 x;
text-align: center;
position: relative;
bottom: -50%;
}
function colorClock(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours <= 9) {
hours = '0' + hours;
}
if (minutes <= 9) {
minutes = '0' + minutes;
}
if (seconds <= 9) {
seconds = '0' + seconds;
}
var clockFace = hours + ':' + minutes + ':' + seconds;
var hexColor = '#' + hours + minutes + seconds;
document.getElementById('clock').innerHTML = clockFace;
document.body.style.background = hexColor;
setTimeout(function() {
colorClock();
}, 1000);
}
colorClock();
@nickone48

This comment has been minimized.

Copy link
Owner Author

commented Jun 12, 2019

Nice clock.

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.