使用html与javascript制作简单的网页时钟
主要包含两部分，一是网页，在网页中添加一个canvas标签，主要的部分还是使用javascript实现对画布的控制
html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 网页时钟 </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="description" content="" /> <script language="JavaScript" type = "text/javascript" src = "drawImage.js"></script><script type="text/css">div#btn { margin-top:300px;}</script></head> <body ><div id = "btn"><Button onclick = "drawImage()">单击画图</Button><Button onclick = "second_pointer_move()">秒针移动</Button><Button onclick = "demo()">示例</Button></div><canvas id="mycanvas" width='200' height='200' style="border:1px solid #c3c3c3;" >浏览器不支持</canvas> </body></html>
js部分
setInterval('second_pointer_move()',1000);setInterval('minute_pointer_move()',1000);setInterval('hour_pointer_move()',1000);//初始化图形var arr_loc = [100,100,100,100,100,100];function drawImage(){var can_vas = document.getElementById("mycanvas");var ctx = can_vas.getContext("2d");ctx.fillStyle='#c3c33c';ctx.strokeStyle='#00ff00';ctx.beginPath(); // Start the pathctx.arc(100, 100, 100, 0, Math.PI*2,true); // Draw a circlectx.closePath();ctx.fill();ctx.stroke();add_text();}function add_text(){var can_vas = document.getElementById("mycanvas");var ctx = can_vas.getContext("2d");ctx.save();ctx.textAlign ='center';ctx.font = "15px impact";ctx.fillStyle='#ff0000';ctx.fillText("12",100,20,100);ctx.fillText("6",100,195,100);ctx.fillText("3",190,105,100);ctx.fillText("9",8,105,100);}function cover_pointer(arr_loc_x,arr_loc_y){var can_vas = document.getElementById("mycanvas");var ctx = can_vas.getContext("2d");ctx.beginPath();ctx.moveTo(100,100);ctx.lineWidth = 2;ctx.strokeStyle='#c3c33c';ctx.lineTo(arr_loc_x,arr_loc_y);ctx.closePath();ctx.stroke();}//秒针移动function second_pointer_move(){cover_pointer(arr_loc[0],arr_loc[1]);//drawImage();var time = new Date();var second_count = time.getSeconds();var length = 80;var second_pointer_x ;var second_pointer_y ;var can_vas = document.getElementById("mycanvas");var ctx = can_vas.getContext("2d");angle = second_count*6;angle_sin = Math.sin(angle*Math.PI/180);angle_cos = Math.cos(angle*Math.PI/180);//计算终点坐标switch(Math.floor(angle/90)){case 0 : {second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}case 1:{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}case 2:{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}default :{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;}}arr_loc[0] = second_pointer_x;arr_loc[1] = second_pointer_y;ctx.beginPath();ctx.moveTo(100,100);ctx.lineWidth = 1;ctx.strokeStyle="#00ff00";ctx.lineTo(second_pointer_x,second_pointer_y);ctx.closePath();ctx.stroke();}//分针移动function minute_pointer_move(){cover_pointer(arr_loc[2],arr_loc[3]);//drawImage();var time = new Date();var second_count = time.getMinutes();var length = 65;var second_pointer_x ;var second_pointer_y ;var can_vas = document.getElementById("mycanvas");var ctx = can_vas.getContext("2d");angle = second_count*6;angle_sin = Math.sin(angle*Math.PI/180);angle_cos = Math.cos(angle*Math.PI/180);ctx.moveTo(100,100);//计算终点坐标switch(Math.floor(angle/90)){case 0 : {second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}case 1:{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}case 2:{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}default :{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;}}arr_loc[2] = second_pointer_x;arr_loc[3] = second_pointer_y;ctx.beginPath();ctx.moveTo(100,100);ctx.lineWidth = 1;ctx.lineTo(second_pointer_x,second_pointer_y);ctx.strokeStyle="#00ff00";ctx.closePath();ctx.stroke();}//时针移动function hour_pointer_move(){cover_pointer(arr_loc[4],arr_loc[5]);//drawImage();var time = new Date();var second_count = time.getHours();var minuute_count = time.getMinutes();var length = 50;var second_pointer_x ;var second_pointer_y ;var can_vas = document.getElementById("mycanvas");var ctx = can_vas.getContext("2d");angle = (second_count%12+minuute_count/60)*30;angle_sin = Math.sin(angle*Math.PI/180);angle_cos = Math.cos(angle*Math.PI/180);ctx.moveTo(100,100);//计算终点坐标switch(Math.floor(angle/90)){case 0 : {second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}case 1:{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}case 2:{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;break;}default :{second_pointer_x = 100 + length*angle_sin;second_pointer_y = 100 - length*angle_cos;}}arr_loc[4] = second_pointer_x;arr_loc[5] = second_pointer_y;ctx.beginPath();ctx.moveTo(100,100);ctx.lineWidth = 1;ctx.lineTo(second_pointer_x,second_pointer_y);ctx.strokeStyle="#00ff00";ctx.closePath();ctx.stroke();}//演示示例function demo(){var time = new Date();var second_count = time.getHours();alert(second_count%12);}