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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
HTML+JS实现在线朗读器
Feb 15 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邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JavaScript模拟push
2016/03/06 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
python 统计代码行数简单实例
2017/05/04 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python openCV自制绘画板
2020/10/27 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
应聘护士自荐信
2013/10/21 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
说明书格式及范文
2014/05/07 职场文书
安全演讲稿开场白
2014/08/25 职场文书
西湖英语导游词
2015/02/06 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
js判断两个数组相等的5种方法
2022/05/06 Javascript