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时钟特效专题

到此这篇关于js实现特别简单的钟表效果就介绍到这了。忍别人所不能忍的痛,吃别人所别人所不能吃的苦,是为了收获得不到。更多相关js实现特别简单的钟表效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
源码分析系列之json_encode()如何转化一个对象

基于php解决json_encode中文UNICODE转码问题

php让json_encode不自动转义斜杠“/”的方法

php+js实现的无刷新下载文件功能示例

JS操作XML中DTD介绍及使用方法分析