September 11, 2011

Time Color

The comic will be posted later today, however, until then:

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:

Skylark Lenny said...

THIS IS SO AMUSING 8D!!!

Post a Comment