时钟--自学时跟学练习

最新推荐文章于 2025-05-18 16:45:19 发布

chixing1271

最新推荐文章于 2025-05-18 16:45:19 发布

阅读量112

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/u/3373793/blog/869468

版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时钟</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap.min.css" />

<style type="text/css">
div{
text-align: center;
margin-top: 80px;
}
#clock{
border: 1px solid #ccc;
}
</style>
</head>
<body>

function drawBackground(){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth=10*rem;
ctx.arc(0,0,r - ctx.lineWidth/2,0,2*Math.PI,false);
ctx.stroke();
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
hourNumbers.forEach(function(number,i){
var rad=2*Math.PI/12*i;
var x=Math.cos(rad)*(r-30*rem),
y=Math.sin(rad)*(r-30*rem);
ctx.font = 18*rem+"px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(number,x,y);
});

for (var i = 0; i < 60; i++) {

var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-18*rem),
y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();
if(i % 5==0){
ctx.fillStyle="#000";
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}else{
ctx.fillStyle="#ccc";
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
};
ctx.fill();
};
};
function drawHours(hour,minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour,
mrad=2*Math.PI/12/60*minute;
ctx.rotate(rad+mrad);
ctx.moveTo(0,10*rem);
ctx.lineWidth=6*rem;
ctx.lineCap="round";
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function drawMinutes(minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.moveTo(0,10*rem);
ctx.lineWidth=3*rem;
ctx.lineCap="round";
ctx.lineTo(0,-r+30*rem);
ctx.stroke();
ctx.restore();
}
function drawSeconds(second){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*second;
ctx.rotate(rad);
ctx.moveTo(0,10*rem);
ctx.lineWidth=2;
ctx.lineTo(0,-r+30*rem);
ctx.strokeStyle="red";
ctx.stroke();
ctx.restore();
}
function drawDot(){
ctx.beginPath();
ctx.arc(0,0,3*rem,2*Math.PI,false);
ctx.fillStyle="white";
ctx.fill();
}
function draw(){
ctx.clearRect(0,0,width,height);
var now=new Date(),
hour=now.getHours(),
minute=now.getMinutes(),
second=now.getSeconds();
drawBackground();
drawHours(hour,minute);
drawMinutes(minute);
drawSeconds(second);
drawDot();
ctx.restore();
}
draw();
setInterval(draw,1000);