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 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
js实现下拉框二级联动
Dec 04 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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 学习提高路线分享
2011/10/23 PHP
php异常处理使用示例
2014/02/25 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
简单的JS多重继承示例
2008/03/13 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
JS如何监听div的resize事件详解
2020/12/03 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python简单实例训练(21~30)
2017/11/15 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
详解python中*号的用法
2019/10/21 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python ellipsis 的用法详解
2020/11/20 Python
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
材料工程专业毕业生求职信
2014/03/04 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
离职保密承诺书
2014/05/28 职场文书
汽车广告策划方案
2014/05/31 职场文书
清洁工个人工作总结
2015/03/05 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
Java 关于String字符串原理上的问题
2022/04/07 Java/Android