JS+html怎么制作时钟

本文小编为大家详细介绍“JS+html怎么制作时钟”，内容详细，步骤清晰，细节处理妥当，希望这篇“JS+html怎么制作时钟”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

10年积累的成都网站设计、成都做网站、外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有松阳免费网站建设让你可以放心的选择与我们合作。

时钟效果图：

JS+html怎么制作时钟

具体原理：

首先将时钟分为四个不同区域，对每个区域计算cos，sin 来确实指针顶点位置。在通过画布来绘画出指针。
通过setInterval 每秒刷新指针位置实现传统机械表针的动态跳动。

本人是JS开发程序员，从业1年多。闲来无聊的简单页面，

欢迎大家提问，或者建议。共同进步

代码部分，直接复制HTML 文件中即可查看效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>clock</title>
</head>
<body >
  <div >
    <div >
    </div>
    <canvas id="t" width="800" height="800"></canvas>
    <div >
    </div>
  </div>
  <script language="javascript">
        var s = setInterval(moveI, 1000);
        function moveI() {
          var c = document.getElementById("t");
          var pc = c.getContext("2d");
          c.height = c.height;
          //秒
          pc.lineWidth = 3;
          pc.strokeStyle = 'rgba(255,0,0,0.8)';
          var now = new Date();
          var sindex = getxy(150, now.getSeconds());
          pc.moveTo(400, 400);
          pc.lineTo(sindex.x, sindex.y);
          pc.stroke();
          pc.beginPath();
          //分
          pc.lineWidth = 7;
          pc.strokeStyle = 'rgba(50,50,50,0.8)';
          var mindex = getxy(120, now.getMinutes() + (now.getSeconds() / 60));
          pc.moveTo(400, 400);
          pc.lineTo(mindex.x, mindex.y);
          pc.stroke();
          pc.beginPath();
          //时
          pc.lineWidth = 10;
          pc.strokeStyle = 'rgba(0,0,0,0.8)';
          var hindex = getxy(80, ((now.getHours() > 12 ? now.getHours() - 12 : now.getHours()) + (now.getMinutes() / 60)) * 5);
          pc.moveTo(400, 400);
          pc.lineTo(hindex.x, hindex.y);
          pc.stroke();
        };

        function getxy(r, t) {
          //计算分区 0,1,2,3
          var a = parseInt(t / 15);
          //分区角度
          t = t - 15 * a;
          var y;
          var x;
          //基于分区的坐标计算
          switch (a) {
            case 0:
              y = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            case 1:
              y = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            case 2:
              y = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            case 3:
              y = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            default:
              break;
          }
          y = (400 - r) + y;
          x = (400 - r) + x;
          return {
            'x': x,
            'y': y
          };
        };
  </script>
</body>

</html>

读到这里，这篇“JS+html怎么制作时钟”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

当前题目：JS+html怎么制作时钟
浏览路径：https://www.cdcxhl.com/article30/jgcjpo.html

成都网站建设公司_创新互联，为您提供App设计、定制网站、自适应网站、云服务器、企业网站制作、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容