您的位置：首页 > Web前端 > JavaScript

使用html与javascript制作简单的网页时钟

2012-10-11 08:18 931 查看
主要包含两部分，一是网页，在网页中添加一个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);
}


 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript html function date xhtml border
相关文章推荐
新的分享
章节导航