运用html与javascript制作简单的网页时钟 _HTML/CSS

使用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 path
	ctx.arc(100, 100, 100, 0, Math.PI*2,true); // Draw a circle
	ctx.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);
}