2011年12月27日 星期二

[HTML5] A simple clock.

This is a shabby clock.



<html>
 <body>
  <canvas id="canvas1" width="300" height="200"></canvas>
  <script type="text/javascript">

  setInterval(drawClock, 1000);

function drawClock()
{
// get canvas and datetime
var canvas = document.getElementById("canvas1");
  var cx = canvas.getContext("2d");
  var currentDate = new Date();
  var hours = currentDate.getHours();
  var mins = currentDate.getMinutes();
  var secs = currentDate.getSeconds();
 
  cx.clearRect(0, 0, canvas.width, canvas.height);
 
  cx.fillStyle = "red";
  cx.fillRect(0, 0, 2 * hours * 60 / 24, 20);
  cx.fillText("Hour: " + hours, 130, 20);
 
  cx.fillStyle = "blue";
  cx.fillRect(0, 20, 2 * mins, 20);
  cx.fillText("Minute: " + mins, 130, 40);
 
  cx.fillStyle = "green";
  cx.fillRect(0, 40, 2 * secs, 20);
  cx.fillText("Second: " + secs, 130, 60);
}
  </script>
 </body>
</html>




This is its output.

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)