这里做一个HTML5 入门的练手，一个小时钟项目，可以再上面拓展很多，程序员培养的就是思想
<!DOCTYPE HTML> <html> <head> <title>Click</title> <style> #clock{ background:#abcdef; } </style> </head> <body> <canvas id="clock" width="500" height="500" > 您的浏览器不支持标签，无法看到时钟 </canvas> </body> <script> var clock = document.getElementById("clock"); var cxt = clock.getContext("2d"); function drawCloclk(){ cxt.clearRect(0,0,500,500); //获取时间对象 var now = new Date(); var sec = now.getSeconds(); var min = now.getMinutes(); var hours = now.getHours(); //小时必须获取浮点类型 hours = hours+min/60; //转换时间 hours = hours >12?hours-12:hours; //表盘 蓝色 cxt.lineWidth = 10; cxt.strokeStyle="blue"; cxt.beginPath(); cxt.arc(250,250,200,0,360,false); cxt.stroke(); cxt.closePath(); //刻度 for(var i=0;i<12;i++){ //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 10; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(i*30*Math.PI/180); //画线 cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } //分刻度 for(var i=0;i<60;i++){ //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 5; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(i*6*Math.PI/180); //画线 cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } //时针 //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 7; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(hours*30*Math.PI/180); //画线 cxt.moveTo(0,-140); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); //分针 //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 5; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(min*6*Math.PI/180); //画线 cxt.moveTo(0,-160); cxt.lineTo(0,15); cxt.stroke(); cxt.closePath(); cxt.restore(); //秒针 //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 3; cxt.strokeStyle="red"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(sec*6*Math.PI/180); //画线 cxt.moveTo(0,-170); cxt.lineTo(0,20); cxt.closePath(); cxt.stroke(); cxt.beginPath(); //画交叉点 cxt.arc(0,0,5,0,360,false) cxt.closePath(); cxt.fillstyle = "blue"; cxt.fill(); cxt.stroke(); cxt.beginPath(); //画交叉点 cxt.arc(0,-150,5,0,360,false) cxt.closePath(); cxt.fillstyle = "blue"; cxt.fill(); cxt.stroke(); cxt.restore(); } //使用周期循环函数setInternal(代码，时间)，让时钟动起来 drawCloclk; setInterval(drawCloclk,1000); </script> </html>