编程 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 相关文章推荐

jquery隐藏标签和显示标签的实例

Nov 11 Javascript

Jquery如何实现点击时高亮显示代码

Jan 22 Javascript

javascript监听鼠标滚轮事件浅析

Jun 05 Javascript

JS实现自动定时切换的简洁网页选项卡效果

Oct 13 Javascript

jquery实现文本框的禁用和启用

Dec 07 Javascript

Bootstrap源码解读按钮（5）

Dec 23 Javascript

js实现二级导航功能

Mar 03 Javascript

微信小程序登录的简单实现

Apr 19 Javascript

ES6新特性四：变量的解构赋值实例

Apr 21 Javascript

angular.js指令中transclude选项及ng-transclude指令详解

May 24 Javascript

完美实现js拖拽效果 return false用法详解

Jul 28 Javascript

vue读取本地的excel文件并显示在网页上方法示例

May 29 Javascript

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

实用函数10

2007/11/08 PHP

yii 框架实现按天，月，年，自定义时间段统计数据的方法分析

2020/04/04 PHP

Firefox中beforeunload事件的实现缺陷浅析

2012/05/03 Javascript

用javascript为页面添加天气显示实现思路及代码

2013/12/02 Javascript

JQuery中操作Css样式的方法

2014/02/12 Javascript

JavaScript实现的简单拖拽效果

2015/06/01 Javascript

JavaScript实现给定时间相加天数的方法

2016/01/25 Javascript

Bootstrap实现水平排列的表单

2016/07/04 Javascript

jquery 动态合并单元格的实现方法

2016/08/26 Javascript

javascript设计模式之中介者模式学习笔记

2017/02/15 Javascript

jQuery选择器_动力节点Java学院整理

2017/07/05 jQuery

JavaScript面向对象精要(下部)

2017/09/12 Javascript

layui 表格的属性的显示转换方法

2018/08/14 Javascript

微信小程序webview 脚手架使用详解

2019/07/22 Javascript

详细分析React 表单与事件

2020/07/08 Javascript

JavaScript中作用域链的概念及用途讲解

2020/08/06 Javascript

Python中__new__与__init__方法的区别详解

2015/05/04 Python

python通过文件头判断文件类型

2015/10/30 Python

Python打包文件夹的方法小结(zip,tar,tar.gz等)

2016/09/18 Python

python删除服务器文件代码示例

2018/02/09 Python

Python+PyQT5的子线程更新UI界面的实例

2019/06/14 Python

Python PyPDF2模块安装使用解析

2020/01/19 Python

哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程

2020/05/07 Python

浅析移动设备HTML5页面布局

2015/12/01 HTML / CSS

PHP面试题及答案一

2012/06/18 面试题

必须要使用游标的SQL语句有那些

2012/05/07 面试题

单位门卫岗位职责

2013/12/20 职场文书

化工工艺设计求职信

2014/06/25 职场文书

意向书范本

2014/07/29 职场文书

查摆问题整改措施

2014/10/24 职场文书

二审代理词范文

2015/05/25 职场文书

2015年第31个教师节致辞

2015/07/31 职场文书

国庆节主题班会

2015/08/15 职场文书

公司致全体员工的感谢信

2019/06/24 职场文书

Golang 实现获取当前函数名称和文件行号等操作

2021/05/08 Golang

SpringBoot整合RabbitMQ的5种模式实战

2021/08/02 Java/Android