JS html時(shí)鐘制作代碼分享

更新時(shí)間：2017年03月03日 16:14:46 作者：笑逗逗

這篇文章主要為大家分享了JS html時(shí)鐘的制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

時(shí)鐘效果圖：

閑來(lái)無(wú)聊做了一個(gè)網(wǎng)頁(yè)的時(shí)鐘，效果模擬傳統(tǒng)時(shí)鐘的運(yùn)行方式，

運(yùn)用了html 的畫布實(shí)現(xiàn)指針，背景圖片引用了網(wǎng)絡(luò)圖片。

具體原理：

首先將時(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 style="color:green; <!--background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');--> background-size:100%; background-repeat: no-repeat; background-attachment:fixed">
  <div style="width: 900px; height: 900px; margin-top: 50px; margin-left: 50px;">
    <div style="position: absolute; left:119px;top: 193px; width: 900px; height: 900px; background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png'); background-repeat: no-repeat; z-index: -1;">
    </div>
    <canvas id="t" width="800" height="800"></canvas>
    <div style="position: absolute; left:118px;top: 464px; width: 100px; height: 200px; background-color: white; background-repeat: no-repeat; z-index: 10;">
    </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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: