時計の原生JS実現

19667 ワード

JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        list-style: none;
      }
      .outer {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        margin: 100px auto;
        position: relative;
        background: radial-gradient(at left center, grey, darkolivegreen);
      }
      .time > li {
        width: 4px;
        height: 10px;
        background-color: #000;
        position: absolute;
        left: 198px;
        top: 0;
        transform-origin: 2px 200px;
      }
      .time li:nth-child(5n + 1) {
        width: 6px;
        height: 15px;
        background-color: #1b7d5b;
        position: absolute;
        left: 197px;
        top: 0;
        transform-origin: 3px 200px;
      }
      .hours {
        width: 20px;
        height: 80px;
        background-color: #9e3caa;
        border-radius: 10px;
        transform-origin: 10px 80px;
        position: absolute;
        top: 120px;
        left: 190px;
      }
      .minutes {
        width: 10px;
        height: 100px;
        background-color: #aa7742;
        border-radius: 10px;
        transform-origin: 5px 100px;
        position: absolute;
        top: 100px;
        left: 195px;
      }
      .seconds {
        width: 8px;
        height: 120px;
        background-color: #aa1e1a;
        border-radius: 10px;
        transform-origin: 4px 120px;
        position: absolute;
        top: 80px;
        left: 196px;
      }
      .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #000;
        position: absolute;
        top: 190px;
        left: 190px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <ul class="time"></ul>
      <div class="hours"></div>
      <div class="minutes"></div>
      <div class="seconds"></div>
      <div class="dot"></div>
    </div>
    <script>
      var oTime = document.querySelector('.time')
      var oOuter = document.querySelector('.outer')
      var oHours = document.querySelector('.hours')
      var oMinutes = document.querySelector('.minutes')
      var oSeconds = document.querySelector('.seconds')

      /*      li  ，   ul */
      for (var i = 0; i < 60; i++) {
        var newLi = document.createElement('li')
        /*   360 ，  60   ，   6 */
        newLi.style.transform = 'rotate(' + 6 * i + 'deg)'
        oTime.appendChild(newLi)
      }

      //      
      function move() {
        var now = new Date()
        var seconds = now.getSeconds()

        var minutes = now.getMinutes()
        minutes = minutes + seconds / 60 //     ，        

        var hours = now.getHours()
        hours = hours + minutes / 60 //     ，        

        oHours.style.transform = 'rotate(' + 30 * hours + 'deg)'
        oMinutes.style.transform = 'rotate(' + 6 * minutes + 'deg)'
        oSeconds.style.transform = 'rotate(' + 6 * seconds + 'deg)'
      }
      /*       */
      setInterval(move, 1000)
    </script>
  </body>
</html>

カレンダーコード1