阿里云優(yōu)惠券 先領(lǐng)券再下單

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)特別簡單的鐘表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)鐘表效果的具體代碼，供大家參考，具體內(nèi)容如下

<div class="clock">
  <div class="circle"></div>
  <div class="hour"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
  <!-- 添加數(shù)字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%;
  
   /* 優(yōu)先顯示它 */
   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;

   /* 繞著底部旋轉(zhuǎn) */
   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++) {

   // 創(chuàng)建一個div保存數(shù)字
   var number = document.createElement('div');
   number.className = 'number';

   // 下標(biāo)就是對應(yīng)的數(shù)字1-12
   number.innerText = i;

   // 追加到頁面中
   nums.appendChild(number);

   // 數(shù)字分別旋轉(zhuǎn)對應(yīng)的角度
   number.style.transform = "rotate(" + dd + "deg)";

   // 確定要旋轉(zhuǎn)的度數(shù)----30deg/60deg/90deg.....
   if (dd < 360) {
    dd += 30;
   }
  }
</script>

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

來源：腳本之家

鏈接：https://www.jb51.net/article/195606.htm

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！