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


Posted in Javascript onSeptember 14, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 #Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 #Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 #Javascript
JavaScript实现串行请求的示例代码
Sep 14 #Javascript
浅谈JavaScript 声明提升
Sep 14 #Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 #Javascript
详解JavaScript 高阶函数
Sep 14 #Javascript
You might like
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
详解php中的implements 使用
2017/06/13 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
纯JS实现轮播图
2017/02/22 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python2包含中文报错的解决方法
2018/07/09 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python map比for循环快在哪
2020/09/21 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
夏洛特的网观后感
2015/06/15 职场文书
销售人员管理制度
2015/08/06 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
vue使用element-ui按需引入
2022/05/20 Vue.js
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python