js实现特别简单的钟表效果 - JavaScript

本文实例为大家分享了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时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。