- <!DOCTYPE html>
- <html>
- <body>
- <div style="width:250px;height:250px;border:1px solid black;position:relative;margin:200px auto;">
- <canvas id="clock" width="250" height="250" style="border:0px solid #d3d3d3;"></canvas>
- <canvas id="sec" width="10" height="200" style="position:absolute;top:22px;left:128px;border:0px solid #d3d3d3;"></canvas>
- <canvas id="min" width="10" height="200" style="position:absolute;top:22px;left:128px;border:0px solid #d3d3d3;"></canvas>
- <canvas id="hour" width="10" height="200" style="position:absolute;top:22px;left:128px;border:0px solid #d3d3d3;"></canvas>
- </div>
- <script>
- function clock(){
- var deg=Math.PI/6,c=document.getElementById("clock"),c=c.getContext("2d"),x,y;
- for(var i=1;i<=12;i++){
- x=125+Math.sin(deg*i)*100;
- y=125-Math.cos(deg*i)*100;
- c.shadowBlur=10;
- c.shadowColor="red";
- if(i==12||i==3||i==6||i==9){
- c.font="20px Georgia";
- c.fillStyle="blue";
- if(i==12){
- x=120;
- }
- }else{
- c.fillStyle="black";
- c.font="15px Georgia";
- }
- c.fillText(i,x,y);
- }
- }
- function sec(){
- var c=document.getElementById("sec");
- c=c.getContext("2d");
- c.arc(5,100,5,0,2*Math.PI);
- c.globalCompositeOperation="destination-over";
- c.fillStyle="red";
- c.fill();
- c.beginPath();
- c.moveTo(5,10);
- c.lineTo(1,25);
- c.lineTo(9,25);
- c.fillStyle="red";
- c.fill();
- c.beginPath();
- c.moveTo(5,10);
- c.lineTo(5,100);
- c.strokeStyle="red";
- c.stroke();
- }
- function min(){
- var c=document.getElementById("min");
- c=c.getContext("2d");
- c.arc(5,100,5,0,2*Math.PI);
- c.globalCompositeOperation="destination-over";
- c.fillStyle="red";
- c.fill();
- c.beginPath();
- c.moveTo(5,25);
- c.lineTo(1,40);
- c.lineTo(9,40);
- c.closePath();
- c.rect(3,40,4,60);
- c.fillStyle="blue";
- c.fill();
- }
- function hour(){
- var c=document.getElementById("hour");
- c=c.getContext("2d");
- c.arc(5,100,5,0,2*Math.PI);
- c.globalCompositeOperation="destination-over";
- c.fillStyle="red";
- c.fill();
- c.beginPath();
- c.moveTo(5,40);
- c.lineTo(1,55);
- c.lineTo(9,55);
- c.closePath();
- c.rect(2,55,6,45);
- c.fillStyle="green";
- c.fill();
- }
- function init(){
- var d=new Date(),aTime=[d.getHours(),d.getMinutes(),d.getSeconds()];
- var s=document.getElementById("sec"),m=document.getElementById("min"),h=document.getElementById("hour");
- s.style.transform="rotate("+aTime[2]*6+"deg)";
- m.style.transform="rotate("+aTime[1]*6+"deg)";
- h.style.transform="rotate("+(aTime[0]%12)*30+"deg)";
- setTimeout("init()",1000);
- }
- clock();sec();min();hour();init();
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/041220137706.html
来源: http://www.codesnippet.cn/detail/041220137706.html