Skip to content

Instantly share code, notes, and snippets.

@LottieVixen

LottieVixen/index.html

Created October 22, 2014 15:00
Show Gist options
  • Save LottieVixen/97b210ae406502d70fc8 to your computer and use it in GitHub Desktop.
Save LottieVixen/97b210ae406502d70fc8 to your computer and use it in GitHub Desktop.
Download ZIP
Colour Clock // source http://jsbin.com/cayip
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Colour Clock" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="con" style="width:100px;">
<meter id="h" min="0" max="24" value="0"></meter><span class="h"></span>
<br>
<meter id="m" min="0" max="60" value="0"></meter><span class="m"></span>
<br>
<meter id="s" min="0" max="60" value="0"></meter><span class="s"></span>
<br>
</div>
<script id="jsbin-javascript">
//colour clock
function myFunction()
{
setInterval(function(){myTimer();},100);
}
function myTimer()
{
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
document.getElementById("s").value=s;
document.getElementById("m").value=m;
document.getElementById("h").value=h;
//if(h>12){h=h-12;}
document.getElementById('h').innerHTML=h;
document.getElementById('m').innerHTML=m;
document.getElementById('s').innerHTML=s;
var red = h * 10;
var green = Math.ceil(m*4.25);
var blue = s*5;
var rgb = 'rgb('+red+','+green+','+blue+')';
document.getElementById("con").style.background = rgb;
console.log(rgb);
}
myFunction();
</script>
<script id="jsbin-source-javascript" type="text/javascript">//colour clock
function myFunction()
{
setInterval(function(){myTimer();},100);
}
function myTimer()
{
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
document.getElementById("s").value=s;
document.getElementById("m").value=m;
document.getElementById("h").value=h;
//if(h>12){h=h-12;}
document.getElementById('h').innerHTML=h;
document.getElementById('m').innerHTML=m;
document.getElementById('s').innerHTML=s;
var red = h * 10;
var green = Math.ceil(m*4.25);
var blue = s*5;
var rgb = 'rgb('+red+','+green+','+blue+')';
document.getElementById("con").style.background = rgb;
console.log(rgb);
}
myFunction();</script></body>
</html>
Raw
jsbin.cayip.js
//colour clock
function myFunction()
{
setInterval(function(){myTimer();},100);
}
function myTimer()
{
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
document.getElementById("s").value=s;
document.getElementById("m").value=m;
document.getElementById("h").value=h;
//if(h>12){h=h-12;}
document.getElementById('h').innerHTML=h;
document.getElementById('m').innerHTML=m;
document.getElementById('s').innerHTML=s;
var red = h * 10;
var green = Math.ceil(m*4.25);
var blue = s*5;
var rgb = 'rgb('+red+','+green+','+blue+')';
document.getElementById("con").style.background = rgb;
console.log(rgb);
}
myFunction();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment