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

javascript removeChild 使用注意事项

Apr 11 Javascript

基于jQuery图片平滑连续滚动插件

Apr 27 Javascript

5分钟理解JavaScript中this用法分享

Nov 09 Javascript

a标签的href与onclick事件的区别详解

Nov 12 Javascript

javascript实现详细时间提醒信息效果的方法

Mar 11 Javascript

JavaScript中的this关键字使用方法总结

Mar 13 Javascript

JavaScript黑洞数字之运算路线查找算法(递归算法)实例

Jan 28 Javascript

AngularJS定时器的使用与移除操作方法【interval与timeout】

Dec 14 Javascript

jQuery EasyUI 页面加载等待及页面等待层

Feb 06 Javascript

基于jQuery代码实现圆形菜单展开收缩效果

Feb 13 Javascript

微信小程序在线客服自动回复功能(基于node)

Jul 03 Javascript

vue中使用vee-validator完成表单校验方案

Nov 01 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

PHP的面向对象编程

2006/10/09 PHP

我常用的几个类

2006/10/09 PHP

NT IIS下用ODBC连接数据库

2006/10/09 PHP

劣质的PHP代码简化

2010/02/08 PHP

php修改文件上传限制方法汇总

2015/04/07 PHP

php使用CutyCapt实现网页截图保存的方法

2016/10/03 PHP

详细解读php的命名空间(二)

2018/02/21 PHP

JavaScript高级程序设计（第3版）学习笔记5 js语句

2012/10/11 Javascript

原生js实现复制对象、扩展对象类似jquery中的extend()方法

2014/08/30 Javascript

jQuery插件EasyUI校验规则 validatebox验证框

2015/11/29 Javascript

JS中关于事件处理函数名后面是否带括号的问题

2016/11/16 Javascript

JavaScript利用fetch实现异步请求的方法实例

2017/07/26 Javascript

vue使用技巧及vue项目中遇到的问题

2018/06/04 Javascript

JavaScript解决浮点数计算不准确问题的方法分析

2018/07/09 Javascript

jQuery与原生JavaScript选择HTML元素集合用法对比分析

2019/11/26 jQuery

测试、预发布后用python检测网页是否有日常链接

2014/06/03 Python

Python实现快速多线程ping的方法

2015/07/15 Python

浅谈Python2.6和Python3.0中八进制数字表示的区别

2017/04/28 Python

简单了解什么是神经网络

2017/12/23 Python

python实现微信跳一跳辅助工具步骤详解

2018/01/04 Python

Python实现全排列的打印

2018/08/18 Python

python实现字符串中字符分类及个数统计

2018/09/28 Python

解决python线程卡死的问题

2019/02/18 Python

python numpy之np.random的随机数函数使用介绍

2019/10/06 Python

python实现两个字典合并,两个list合并

2019/12/02 Python

HTML5 自动聚焦(autofocus)属性使用介绍

2013/08/07 HTML / CSS

加拿大高尔夫超市：Golf Town

2018/01/12 全球购物

中学老师的自我评价

2013/11/07 职场文书

教学大赛获奖感言

2014/01/15 职场文书

给老师的一封建议书

2014/03/13 职场文书

一般基层干部群众路线教育实践活动个人对照检查材料

2014/11/04 职场文书

导游词怎么写

2015/02/04 职场文书

科技活动总结范文

2015/05/11 职场文书

大学生求职意向书

2015/05/11 职场文书

主持人开场白台词

2015/05/29 职场文书

HTML页面滚动时部分内容位置固定不滚动的实现

2021/04/14 HTML / CSS