运用html与javascript制作简单的网页时钟
日期：2014-05-17 浏览次数：20642 次
使用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 sec
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
