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获取flash加载的百分比的实现代码
May 25 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
js实现金山打字通小游戏
Jul 24 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 mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PDO::errorCode讲解
2019/01/28 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
深入理解vue-class-component源码阅读
2019/02/18 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python实现定时发送qq消息
2019/01/18 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python中对_init_的理解及实例解析
2019/10/11 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
商务助理求职信范文
2014/04/20 职场文书
环保建议书200字
2014/05/14 职场文书
中层干部培训方案
2014/06/16 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
大学生支教感言
2015/08/01 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android