编程 Javascript

javascript实现时钟动画

Posted in Javascript onDecember 03, 2020

本文实例为大家分享了javascript实现时钟动画的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>时针转动</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    body,
    html {
      height: 100%;
      width: 100%
    }
    
    .t1 {
      width: 100%;
      height: 100%;
      background-image: radial-gradient(ellipse at 50% 70%, hsla(240, 1%, 90%, 1), hsla(225, 8%, 28%, 1));
    }
    
    .t2 {
      position: relative;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(farthest-side ellipse at 50% 70%, hsla(210, 1%, 78%, 0.73) 100px, rgba(150, 150, 150, 0.7) 400px, hsla(225, 4%, 18%, 0.8) 100%);
      z-index: -3;
    }
    
    .t3 {
      position: absolute;
      left: 50%;
      margin-left: -175px;
      top: 30%;
      height: 350px;
      width: 350px;
      border-radius: 60px;
      background: #fff;
      background-image: linear-gradient(#ffffff 40px, #ddecf2 210px, #d3e3e9);
    }
    
    .t3:before {
      content: "";
      position: absolute;
      box-shadow: 0px -4px 3px 3px #b8bdca inset;
      border-radius: 60px;
      opacity: 0.6;
      height: 100%;
      width: 100%;
      -webkit-filter: blur(1px);
      z-index: 2;
    }
    
    .t3:after {
      content: "";
      height: 17px;
      width: 300px;
      position: absolute;
      top: 97%;
      margin-left: 25px;
      background: #2a2a2b;
      -webkit-filter: blur(7px);
      /*Chrome, Opera*/
      z-index: -1;
    }
    
    .t4 {
      position: relative;
      margin: 71px;
      width: 210px;
      height: 210px;
      border-radius: 50%;
      background-image: linear-gradient(#f9fdff, #d9eaf8);
      box-shadow: 0px 0px 28px -8px #eaf7fb;
      z-index: 11;
      font-size: 20px;
      ;
      color: #8da6b8;
      font-family: Arial;
    }
    
    .t4 i {
      font-style: normal
    }
    
    .hour {
      position: absolute;
    }
    
    .hour3 {
      right: 30px;
      top: 50%;
      margin-top: -7px;
    }
    
    .hour6 {
      left: 50%;
      bottom: 27px;
      margin-left: -5px;
    }
    
    .hour9 {
      left: 30px;
      top: 50%;
      margin-top: -7px;
    }
    
    .hour12 {
      left: 50%;
      top: 30px;
      margin-left: -10px;
    }
    
    .t4:before {
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      border-radius: 50%;
      box-shadow: 0px 15px 24px -5px #7a8fae;
      z-index: 10;
    }
    
    .t4:after {
      content: "";
      left: 0px;
      top: 0px;
      position: absolute;
      width: 210px;
      height: 210px;
      border-radius: 50%;
      box-shadow: 0px 4px 4px -1px #7a8fae;
      z-index: 9;
    }
    
    #miao,
    #fen,
    #shi {
      position: absolute;
      left: 50%;
      height: 210px;
      width: 10px;
      margin-left: -5px;
    }
    
    #miao {
      z-index: 23;
    }
    
    #fen {
      z-index: 22;
    }
    
    #shi {
      z-index: 21;
    }
    
    #shi:after {
      content: "";
      height: 60px;
      width: 6px;
      position: absolute;
      top: 60px;
      left: 2px;
      background: #1aa9d8;
      border-radius: 8px 8px 8px 8px;
      z-index: -1;
    }
    
    #fen:after {
      content: "";
      height: 65px;
      width: 4px;
      position: absolute;
      top: 60px;
      left: 3px;
      background: #23bcef;
      border-radius: 8px 8px 8px 8px;
      z-index: -1;
    }
    
    #miao:after {
      content: "";
      height: 80px;
      width: 1px;
      position: absolute;
      top: 48px;
      left: 4px;
      background: #0dc1fd;
      z-index: -1;
    }
    
    #point {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 16px;
      margin-left: -8px;
      margin-top: -8px;
      z-index: 999;
      border-radius: 50%;
      box-shadow: 0px 3px 8px -1px #0f4873;
    }
    
    #point:before,
    #point:after {
      content: "";
      height: 10px;
      width: 10px;
      position: absolute;
      top: 0%;
      background: #8ba3b6;
      border-radius: 50%;
      z-index: 1;
    }
    
    #point:before {
      width: 16px;
      height: 16px;
    }
    
    #point:after {
      background: #cee3ec;
      left: 3px;
      top: 3px;
    }
  </style>
</head>

<body>
  <div class="t2">
    <!-- 时钟的盒子 -->
    <div class="t3">
      <!-- 时钟区域 -->
      <div class="t4">
        <!-- 数值 -->
        <i class="hour hour3">3</i>
        <i class="hour hour6">6</i>
        <i class="hour hour9">9</i>
        <i class="hour hour12">12</i>
        <!-- 时分秒的转轴 -->
        <div id="miao"></div>
        <div id="fen"></div>
        <div id="shi"></div>
        <!-- 小圆点 -->
        <div id="point"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    // 获取元素
    var shi = document.querySelector('#shi');
    var fen = document.querySelector('#fen');
    var miao = document.querySelector('#miao');


    setInterval(function() {
      var nowDate = new Date();
      // 获取时分秒
      var hour = nowDate.getHours();
      var minute = nowDate.getMinutes();
      var second = nowDate.getSeconds();
      var houerTw = hour % 12 * 30;
      var minuteTW = minute * 6;
      var secondTW = second * 6;
      console.log(houerTw);
      // 变量在拼接是要注意不能加入空格
      shi.style.transform = 'rotate(' + houerTw + 'deg)';
      fen.style.transform = 'rotate(' + minuteTW + 'deg)';
      miao.style.transform = 'rotate(' + secondTW + 'deg)';
    }, 1000)
  </script>


</body>

</html>

效果图：

javascript实现时钟动画

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

javascript实现时钟动画

- Author -

小七Plus

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js tab 选项卡

Apr 26 Javascript

extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

Nov 27 Javascript

CSS鼠标响应事件经过、移动、点击示例介绍

Sep 04 Javascript

在Google 地图上实现做的标记相连接

Jan 05 Javascript

过期软件破解办法实例详解

Jan 04 Javascript

jQuery和CSS仿京东仿淘宝列表导航菜单

Jan 04 Javascript

微信小程序 Template详解及简单实例

Jan 05 Javascript

js删除数组中的元素delete和splice的区别详解

Feb 03 Javascript

vue debug 二种方法

Sep 16 Javascript

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

May 14 Javascript

详解json串反转义（消除反斜杠）

Aug 12 Javascript

Vue项目打包、合并及压缩优化网页响应速度

Jul 07 Vue.js

javascript中导出与导入实现模块化管理教程

Dec 03 #Javascript

JS如何实现在弹出窗口中加载页面

Dec 03 #Javascript

对vue生命周期的深入理解

Dec 03 #Vue.js

在实例中重学JavaScript事件循环

Dec 03 #Javascript

js 数据类型判断的方法

Dec 03 #Javascript

用vue设计一个日历表

Dec 03 #Vue.js

JS闭包原理及其使用场景解析

Dec 03 #Javascript

You might like

PHP函数超时处理方法

2016/02/14 PHP

laravel框架select2多选插件初始化默认选中项操作示例

2020/02/18 PHP

jQuery Ajax之$.get()方法和$.post()方法

2009/10/12 Javascript

jQuery 开天辟地入门篇一

2009/12/09 Javascript

js优化针对IE6.0起作用(详细整理)

2012/12/25 Javascript

jQuery中Dom的基本操作小结

2014/01/23 Javascript

JS实现下拉菜单赋值到文本框的方法

2015/08/18 Javascript

JavaScript图像延迟加载库Echo.js

2016/04/05 Javascript

实例分析浏览器中“JavaScript解析器”的工作原理

2016/12/12 Javascript

纯js实现倒计时功能

2017/01/06 Javascript

基于jquery实现五星好评

2017/11/18 jQuery

微信小程序实现运动步数排行功能（可删除）

2018/07/05 Javascript

使用layer弹窗和layui表单实现新增功能

2018/08/09 Javascript

使用python实现扫描端口示例

2014/03/29 Python

Python实现的简单hangman游戏实例

2015/06/28 Python

TensorFlow实现RNN循环神经网络

2018/02/28 Python

Python2和Python3中urllib库中urlencode的使用注意事项

2018/11/26 Python

Python 输出时去掉列表元组外面的方括号与圆括号的方法

2018/12/24 Python

对DataFrame数据中的重复行,利用groupby累加合并的方法详解

2019/01/30 Python

pandas实现to_sql将DataFrame保存到数据库中

2019/07/03 Python

Python3 shutil（高级文件操作模块）实例用法总结

2020/02/19 Python

利用Pycharm + Django搭建一个简单Python Web项目的步骤

2020/10/22 Python

Html5 实现微信分享及自定义内容的流程

2019/08/20 HTML / CSS

纽约和芝加哥当天送花：Ode à la Rose

2019/07/05 全球购物

党校学习思想汇报

2014/01/06 职场文书

竞聘演讲稿范文

2014/01/12 职场文书

工作会议欢迎词

2014/01/16 职场文书

优秀毕业生事迹材料

2014/02/12 职场文书

总账会计岗位职责

2014/03/13 职场文书

中学生操行评语大全

2014/04/24 职场文书

高中语文课后反思

2014/04/27 职场文书

师德演讲稿范文

2014/05/06 职场文书

食堂标语大全

2014/06/11 职场文书

优秀共产党员推荐材料

2014/12/18 职场文书

搞笑结婚保证书

2015/05/08 职场文书

债务追讨律师函

2015/06/24 职场文书