本文例項為大家分享了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時鐘特效專題

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。