webjs--两种时钟

来源：互联网发布：米特网域名怎么解析编辑：程序博客网时间：2024/06/17 07:18

1：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas clock</title><style type="text/css">            div{text-align:center;margin-top:250px;}</style></head><body>       <div>             <canvas id="clock" width="300" height="300">您的浏览器不支持canvas</canvas>       </div>       <script type="text/javascript">                window.onload=function(){                var c=document.getElementById("clock");                var ctx=c.getContext('2d');                var width=ctx.canvas.width;                var height=ctx.canvas.width;                var r=width/2;                var rem=width/200;                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);                ctx.stroke();                var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];                ctx.font=18*rem+"px Arial";                ctx.textAlign="center";                ctx.textBaseline="middle";                hourNumbers.forEach(function(number,i){                var rad=2*Math.PI/12*i;                var x=Math.cos(rad)*(r-30*rem);                var y=Math.sin(rad)*(r-30*rem);                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-15*rem);                var y=Math.sin(rad)*(r-15*rem);                ctx.beginPath();                if(i%5==0){                ctx.fillStyle='#000';                ctx.arc(x,y,2*rem,0,2*Math.PI)                }                else{                ctx.fillStyle='#ccc';                ctx.arc(x,y,2*rem,0,2*Math.PI)                }                ctx.fill();                }                }                function drawHour(hour,minute){                ctx.save();                ctx.beginPath();                var rad=2*Math.PI/12*hour;                var mrad=2*Math.PI/12/60*minute;                ctx.rotate(rad+mrad);                        ctx.lineWidth=6*rem;                        ctx.lineCap='round';                        ctx.moveTo(0,10*rem);                        ctx.lineTo(0,-r/2);                        ctx.stroke();                        ctx.restore()                }                function drawMinute(minute){                ctx.save();                ctx.beginPath();                var rad=2*Math.PI/60*minute;                ctx.rotate(rad);                        ctx.lineWidth=3*rem;                        ctx.lineCap='round';                        ctx.moveTo(0,10*rem);                        ctx.lineTo(0,-r+35*rem);                        ctx.stroke();                        ctx.restore()                }                function drawSecond(second){                ctx.save();                ctx.beginPath();                ctx.fillStyle='#c14543';                var rad=2*Math.PI/60*second;                ctx.rotate(rad);                        ctx.moveTo(-2*rem,20*rem);                        ctx.lineTo(2*rem,20*rem);                        ctx.lineTo(1,-r+18*rem);                        ctx.lineTo(-1,-r+18*rem);                        ctx.fill();                        ctx.restore()                }                function drawDot(){                ctx.beginPath();                ctx.fillStyle='#fff';                ctx.arc(0,0,3*rem,0,2*Math.PI);                ctx.fill();                }                function draw(){                ctx.clearRect(0,0,width,height)                var now=new Date();                var hour=now.getHours();                var minute=now.getMinutes();                var second=now.getSeconds();                drawBackground();                drawHour(hour,minute);                    drawMinute(minute);                    drawSecond(second);                    drawDot();                    ctx.restore();                }                draw();                setInterval(draw,1000)                }       </script></body></html>

2：

<!DOCTYPE html><html> <head>  <title>Js版带表盘的时钟</title>  <meta charset="utf-8"/>  <style type="text/css">#clock{width:100px; height:100px;border-radius:50%;border:2px solid black;position:relative;}#s{width:2px; height:55px;position:absolute; top:5px; left:49px;background-color:red;transform-origin:50% 45px;}#m{width:4px; height:50px;position:absolute; top:10px; left:48px;background-color:black;transform-origin:50% 40px;}#h{width:6px; height:45px;position:absolute; top:15px; left:47px;background-color:black;transform-origin:50% 35px;}div[id^="a"]{position:absolute;font-size:.5em; text-align:center;width:7px; height:5px;top:0; left: 46.5px;transform-origin:50% 50px;}#a4,#a8{font-size:.4em; font-weight:bold}#a1{transform:rotate(30deg)}#a2{transform:rotate(60deg)}#a3{transform:rotate(90deg)}#a4{transform:rotate(120deg)}#a5{transform:rotate(150deg)}#a6{transform:rotate(180deg)}#a7{transform:rotate(210deg)}#a8{transform:rotate(240deg)}#a9{transform:rotate(270deg)}#a10{transform:rotate(300deg)}#a11{transform:rotate(330deg)}</style> </head> <body>  <div id="clock"><div id="h"></div><div id="m"></div><div id="s"></div><div id="a1">I</div><div id="a2">II</div><div id="a3">III</div><div id="a4">IIII</div><div id="a5">V</div><div id="a6">VI</div><div id="a7">VII</div><div id="a8">VIII</div><div id="a9">IX</div><div id="a10">X</div><div id="a11">XI</div><div id="a12">XII</div>  </div><script>//找到id为h的div，保存在divH中//找到id为m的div，保存在divM中//找到id为s的div，保存在divS中var divH=document.getElementById("h");var divM=document.getElementById("m");var divS=document.getElementById("s");function task(){var now=new Date();//获得当前时间nowvar s=now.getSeconds();//获得当前的svar m=now.getMinutes();//获得当前的mvar h=now.getHours();//获得当前的hh>=12&&(h-=12);//如果h>=12，就改为h-12var sDeg=s/60*360;//计算s的角度sDegvar mDeg=(m*60+s)/3600*360;//计算m的角度mDeg//计算h的角度hDegvar hDeg=(h*3600+m*60+s)/(3600*12)*360;//设置divS的transform属性为rotate(sDegdeg)//设置divM的transform属性为rotate(mDegdeg)//设置divH的transform属性为rotate(hDegdeg)divS.style.transform="rotate("+sDeg+"deg)";divM.style.transform="rotate("+mDeg+"deg)";divH.style.transform="rotate("+hDeg+"deg)";}task();setInterval(task,1000);</script> </body></html>

阅读全文

0 0