总之新Blog入驻以后，又开始*惯，到处折腾自定义的空间，放些东西。
想起以前大一的时候做过一个Javascript的时间显示器，现在想做一个时钟，当然现在老奸巨猾，会先去看一看有前辈写过没。
前辈在此：html5 canvas js(时钟) from kim_zh
感觉他写的有点大，颜色有点多，所以我调整了一下，更适合cnblog的侧边栏，另外去掉了秒针，调整了一些宽度。
<canvas id = "clock" width = "200px" height = "200px"> 您的浏览器已过时，请更新！ </canvas> <script type = "text/javascript"> var clock = document.getElementById("clock"); var cxt = clock.getContext("2d"); function drawClock(x) { var y = x / 2; var r = (x - 50) / 2; var x1 = r - 10; var x2 = r - 20; var x3 = r - 30; var x4 = r - 40; var x5 = r - 50; //清除画布 cxt.clearRect(0, 0, x, x); var now = new Date; var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); //解决时针的问题：1、小时之间 2、19:59:30s hour += min / 60; hour = hour > 12 ? hour - 12 : hour; //时刻度 for (var i = 0; i < 12;i++ ) { cxt.save(); cxt.lineWidth = 3; cxt.strokeStyle = "#000"; cxt.translate(y, y); cxt.rotate(i*30 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -x1); cxt.lineTo(0, -x2); cxt.closePath(); cxt.stroke(); cxt.restore(); } //分刻度 for (var i = 0; i < 36; i++) { cxt.save(); cxt.lineWidth = 1; cxt.strokeStyle = "#000"; cxt.translate(y, y); cxt.rotate(i * 10 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -x1); cxt.lineTo(0, -x2); cxt.closePath(); cxt.stroke(); cxt.restore(); } //时针 cxt.save(); cxt.lineWidth = 2; cxt.strokeStyle = "#000"; cxt.translate(y, y); cxt.rotate(hour * 30 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -x5); cxt.lineTo(0, 15); cxt.closePath(); cxt.stroke(); cxt.restore(); //分针 cxt.save(); cxt.lineWidth = 1; cxt.strokeStyle = "#000"; cxt.translate(y, y); cxt.rotate(min * 6 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -x4); cxt.lineTo(0, 18); cxt.closePath(); cxt.stroke(); cxt.restore(); } //行走 drawClock(200); setInterval("drawClock(200)", 60000); </script>