Skip to content

Instantly share code, notes, and snippets.

@idmontie

idmontie/color-time.html

Created September 14, 2015 03:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save idmontie/e5bd5fcf90a58283c551 to your computer and use it in GitHub Desktop.
Save idmontie/e5bd5fcf90a58283c551 to your computer and use it in GitHub Desktop.
Download ZIP
Color Time
Raw
color-time.html
<html>
<head>
<style>
#time {
width: 300px;
height: 40px;
margin: 10px auto;
padding: 30px;
font-family: verdana;
text-align: center;
font-size: 32px;
color: #333;
border-radius: 10px;
}
</style>
<script>
setInterval(function () {
var currentTime = new Date()
var red = Math.floor( (Math.sin(+currentTime/100000)+1) * 255/2);
var blue = Math.floor( (Math.sin(2 * (+currentTime/100000 + 50))+1) * 255/2);
var green = Math.floor( (Math.sin(3 * (+currentTime/100000 + 170))+1) * 255/2);
var color = "rgba(" + red + "," + green + "," + blue + ",255)";
var inverse = "rgba(" + (255-red) + "," + (255-green) + "," + (255-blue) + ",255)";
document.getElementById('time').style.background = color;
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (minutes < 10){
minutes = "0" + minutes;
}
if (seconds < 10){
seconds = "0" + seconds;
}
document.getElementById('time').innerHTML = hours + ":" + minutes + ":" + seconds + " " + (hours > 11 ? "PM" : "AM");
}, 100);
</script>
</head>
<body>
<div id="time">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment