Just a little thought experiment I made after seeing something similar on StumbleUpon. Theirs was made with Flash, mine's Javascript. Also, I'm not sure whether every color will be cycled through, nor do I know what the period is for the color cycle. O well, I didn't care that much.
Watch the color change as time goes on:
For anyone interested, here is the code:
<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>
1 comments:
THIS IS SO AMUSING 8D!!!
Post a Comment