Hmlt5与Js实现动态时钟

zyw · 发表于 2016-10-10 13:17:29

本帖最后由 zyw 于 2016-10-10 13:24 编辑

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时钟</title>
<style type="text/css">
canvas{
background-color:grey;
}
</style>
<script type="text/javascript">
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
//m=25;
//s=58;
s=s-15;
m=m-15;
h=(h%12)*5+0-15+((m+15)/12);
window.onload=function (){
var can=document.getElementById('can');
var draw=can.getContext("2d");
function drawMark(){
draw.shadowColor="#ccc";
draw.shadowOffsetX=1;
draw.shadowOffsetY=1;
draw.shadowBlur=5;
var cg=draw.createRadialGradient(200,200,10,200,200,80);
cg.addColorStop(0,"white");
cg.addColorStop(0.7,"#ccc");
cg.addColorStop(1,"#ccc");
draw.beginPath();
draw.fillStyle=cg;
draw.arc(200,200,100,0,Math.PI*2);
draw.stroke();
draw.fill();
for(var i=0;i<60;i++) {
var r=0;
var lw=0;
if(i%5==0) {
lw=3;
r=82;
} else {
lw=1;
r=90;
}
draw.beginPath();
draw.lineWidth=lw;
draw.moveTo(200+100*Math.cos(6*i*Math.PI/180),200+100*Math.sin(6*i*Math.PI/180));
draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
draw.stroke();
}
draw.beginPath();
draw.fillStyle="black";
draw.arc(200,200,5,0,Math.PI*2);
draw.stroke();
draw.fill();
}
function Hours(){
draw.beginPath();
draw.moveTo(200,200);
var i=0;
r=80;
draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
draw.stroke();
}
function Hours(i){
draw.beginPath();
draw.lineWidth=3;
draw.moveTo(200,200);
r=60;
draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
draw.stroke();
}
function Minutes(i){
draw.beginPath();
draw.lineWidth=2;
draw.moveTo(200,200);
r=70;
draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
draw.stroke();
}
function Seconds(i){
draw.beginPath();
draw.lineWidth=1;
draw.moveTo(200,200);
r=80;
draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
draw.stroke();
}
drawMark();
Hours(h);
Minutes(m);
Seconds(s);
setInterval(function (){
var date=new Date();
h=date.getHours();
m=date.getMinutes()-15;
s=date.getSeconds()-15;
h=(h%12)*5+0-15+((m+15)/12);
draw.clearRect(0,0,400,400);
drawMark();
Hours(h);
Seconds(s);
Minutes(m);
},1000);
}
</script>
</head>
<body>
<canvas width="400" height="400" id="can">你的浏览器out了</canvas>
</body>
</html>

复制代码

示例演示

菩提老祖 · 发表于 2016-10-13 21:23:15

谢谢楼主，学习了！

zyw327 · 发表于 2016-10-11 11:21:51

学习了！


30 金钱	回复本帖可获得 10 金钱奖励! 每人限 1 次(中奖概率 40%)

Hmlt5与Js实现动态时钟

本帖子中包含更多资源