JS+html怎么制作時(shí)鐘

發(fā)布時(shí)間：2022-04-26 16:31:55 來(lái)源：億速云閱讀：119 作者：iii 欄目：大數(shù)據(jù)

本文小編為大家詳細(xì)介紹“JS+html怎么制作時(shí)鐘”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JS+html怎么制作時(shí)鐘”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

時(shí)鐘效果圖：

JS+html怎么制作時(shí)鐘

具體原理：

首先將時(shí)鐘分為四個(gè)不同區(qū)域，對(duì)每個(gè)區(qū)域計(jì)算cos，sin 來(lái)確實(shí)指針頂點(diǎn)位置。在通過(guò)畫布來(lái)繪畫出指針。
通過(guò)setInterval 每秒刷新指針位置實(shí)現(xiàn) 傳統(tǒng)機(jī)械表針的動(dòng)態(tài)跳動(dòng)。

本人是JS開(kāi)發(fā)程序員，從業(yè)1年多。閑來(lái)無(wú)聊的簡(jiǎn)單頁(yè)面，

歡迎大家提問(wèn)，或者建議。共同進(jìn)步

代碼部分，直接復(fù)制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();
          //時(shí)
          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) {
          //計(jì)算分區(qū) 0,1,2,3
          var a = parseInt(t / 15);
          //分區(qū)角度
          t = t - 15 * a;
          var y;
          var x;
          //基于分區(qū)的坐標(biāo)計(jì)算
          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怎么制作時(shí)鐘”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

JS+html怎么制作時(shí)鐘

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽