js之简易网页时钟

最新推荐文章于 2023-01-15 17:32:44 发布

fengsigaoju

最新推荐文章于 2023-01-15 17:32:44 发布

阅读量846

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/fengsigaoju/article/details/52906384

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

没什么太多难点，比用java写时钟简单的太多，唯一需要注意的是载入页面先绘制一次，再调用setInterval()方法，否则浏览器就会先空白一段时间

<html>
<head>
	<title>clock</title>
	<script type="text/javascript">
   window.οnlοad=draw;
   function draw()
   {
     clock();//先绘制一次，否则先调用setinterval会使浏览器有一秒钟的空白
     setInterval("clock()",1000);//调用计时器

   }
   function clock()
     {
     var drawing=document.getElementById("drawing");
     if  (drawing.getContext){   
     var context=drawing.getContext("2d");
     context.clearRect(0,0,200,200);//每次清除图形绘制新的图形
     context.beginPath();
     context.arc(100,100,99,0,2*Math.PI,false);//绘制外表盘
     context.moveTo(194,100);
     context.arc(100,100,94,0,2*Math.PI,false);//绘制内表盘
     context.font="bold 16px Arial"
     context.textAlign="center";
     context.textBaseline="middle";
     context.fillText("12",100,20);//绘制表盘12
     context.fillText("3",180,100);//绘制表盘3
     context.fillText("6",100,180);//绘制表盘6
     context.fillText("9",20,100);//绘制表盘9
     context.stroke();
     var date=new Date();
     var seconds=date.getSeconds();//秒
     var minutes=date.getMinutes()+seconds/60;//分
     var hours=date.getHours();//时
     if (hours>=12) hours=hours-12+minutes/60;
     
     
     context.save();
     context.translate(100,100);      
     context.rotate(Math.PI*seconds/30);//秒钟旋转的弧度
     context.beginPath();
     context.moveTo(0,0);
     context.lineTo(0,-85);
     context.stroke();
     context.closePath();
     context.restore();
     context.stroke();


     context.save();
     context.translate(100,100);      
     context.rotate(Math.PI*minutes/30);//分钟旋转的角度
     context.beginPath();
     context.moveTo(0,0);
     context.lineTo(0,-70);
     context.stroke();
     context.closePath();
     context.restore();
     context.stroke();


     context.save();
     context.translate(100,100);//变换原点
     context.rotate(Math.PI*hours/6);
     context.moveTo(0,0);
     context.lineTo(0,-55);//说明是从(0,0)~(0,-70)这条线作为开始旋转
     context.stroke();
     context.closePath();
     context.restore();
     context.stroke();
    }
    
  }
   </script>
</head>
<body>
   <canvas id="drawing" width="200"height="200"></canvas>
</body>
<head>
   



</head>
</html>