jsは特に簡単な時計効果を実現します。

この事例では、js時計の効果を実現するための具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。

<div class="clock">
  <div class="circle"></div>
  <div class="hour"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>


  <!--     1-12 -->
  <div class="nums"> </div>

 </div>

 * {
   margin: 0;
   padding: 0;
  }

  .clock {
   position: relative;
   width: 200px;
   height: 200px;
   border: solid 14px rgb(247, 129, 149);
   border-radius: 50%;
   margin: 100px auto;
   background: linear-gradient( rgb(190, 155, 223),pink);

  }
  .circle{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   width: 12px;
   height: 12px;
   background-color: black;
   border-radius: 50%;
   
   /*       */
   z-index: 5;
  }
  .hour {
   position: absolute;
   left: 49.5%;
   top: 48px;
   width: 4px;
   height: 50px;
   background-color: blue;
   
 /* steps(60)-- 60  */
   animation: run 21600s steps(60) infinite;

   /*        */
   transform-origin: bottom;

   z-index: 3;

  }
  .minutes {
   position: absolute;
   left: 49.5%;
   top: 28px;
   width: 3px;
   height: 70px;
   background-color: rgb(240, 83, 83);

   animation: run 3600s steps(60) infinite;

   transform-origin: bottom;
   z-index: 2;

  }
  .seconds {
   position: absolute;
   left: 50%;
   top: 2px;
   width: 2px;
   height: 96px;
   background-color: pink;
   animation: run 60s steps(60) infinite;
   transform-origin: bottom;
  }

  .ps {
   width: 100%;
   height: 100%;
  }
  .number {
   position: absolute;
   left: 50%;
   width: 10px;
   height: 98px;
   transform-origin: bottom;
   color: rgb(230, 53, 156);
   font-weight: bold;
   font-size: 20px;
  }
  .number:last-child {
   left: 47%;
  }
  @keyframes run {
   0% {
    transform: rotate(0);
   }
   100% {
    transform: rotate(360deg)
   }
  }

<script>

  var nums = document.querySelector('.nums')

  var dd = 30;

  for (var i = 1; i < 13; i++) {

   //     div    
   var number = document.createElement('div');
   number.className = 'number';

   //          1-12
   number.innerText = i;

   //       
   nums.appendChild(number);

   //            
   number.style.transform = "rotate(" + dd + "deg)";

   //         ----30deg/60deg/90deg.....
   if (dd < 360) {
    dd += 30;
   }
  }
</script>

もっと多いJavaScriptクロックの特効はクリックして見ます：JavaScriptクロック特効テーマ
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。