HTML5動態時鐘
效果圖
這裏無法實時顯示當前時間，可以看我這篇博客。
原理
先打上html5中的canvas標籤，它定義了一塊畫布，可以用javascript在上前面做動態效果。
調用瀏覽器內置對象window的setInterval（animate，delay）方法，可以實現每隔delay時間調用一次自定義的animate方法，從而達到動態的效果。
代碼實現
```javascript
<body>
<canvas id="mycanvas" width="500" height="500" style="background: #B0D141"></canvas>
<script>
var mycanvas = document.getElementById("mycanvas");
var context = mycanvas.getContext("2d");
function drawClock() {
//每次調用函數都要對指定區域清屏
context.clearRect(0, 0, 500, 500);
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = (hour >= 12) ? hour - 12 : hour;
hour = hour + min / 60;
min = min + sec / 60;
//畫圓
context.lineWidth=10;
context.strokeStyle='#000';
context.beginPath();
context.arc(250, 250, 200, 0, 360, false);
context.closePath();
context.stroke();
//畫時刻度
for (var i = 0; i < 12; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, -190);
context.lineTo(0, -170);
context.closePath();
context.stroke();
context.restore();
}
//畫分刻度
context.beginPath();
for (var i = 0; i < 60; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 6 * Math.PI / 180);
context.moveTo(0, -190);
context.lineTo(0, -180);
context.closePath();
context.stroke();
context.restore();
}
//畫時針
context.save();
context.lineWidth=12;
context.beginPath();
context.translate(250, 250);
context.rotate(hour * Math.PI * 30 / 180);
context.moveTo(0, -135);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//畫分針
context.save();
context.lineWidth=8;
context.beginPath();
context.translate(250, 250);
context.rotate(min * Math.PI * 6 / 180);
context.moveTo(0, -160);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//畫秒針
context.save();
context.lineWidth=5;
context.strokeStyle='red';
context.beginPath();
context.translate(250, 250);
context.rotate(sec * Math.PI * 6 / 180);
context.moveTo(0, -182);
context.lineTo(0, 16);
context.closePath();
context.stroke();
context.restore();
}
setInterval(drawClock, 1000);
</script>
<body/>
“`
後記
沒想到markdown還能支持javascript。這樣以後可以通過類似的方法在blog中用js做動態效果了。