编程 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的执行顺序之jQuery.html深度分析

Mar 03 Javascript

javascript学习笔记(十一) 正则表达式介绍

Jun 20 Javascript

Js注册协议倒计时的小例子

Jun 24 Javascript

js在数组中删除重复的元素自保留一个(两种实现思路)

Aug 22 Javascript

node.js开机自启动脚本文件

Dec 24 Javascript

JS模拟Dialog弹出浮动框效果代码

Oct 16 Javascript

jquery分页插件jquery.pagination.js实现无刷新分页

Apr 01 Javascript

javascript原型继承工作原理和实例详解

Apr 07 Javascript

完美解决js传递参数中加号和&号自动改变的方法

Oct 11 Javascript

浅谈JavaScript find 方法不支持IE的问题

Sep 28 Javascript

vuejs使用axios异步访问时用get和post的实例讲解

Aug 09 Javascript

Angular父子组件通过服务传参的示例方法

Oct 31 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 判断常量,变量和函数是否存在

2009/04/26 PHP

深入Apache与Nginx的优缺点比较详解

2013/06/17 PHP

解析使用substr截取UTF-8中文字符串出现乱码的问题

2013/06/20 PHP

Symfony2框架学习笔记之表单用法详解

2016/03/18 PHP

php自定义函数实现汉字转换utf8编码的方法

2016/09/29 PHP

IE php关于强制下载文件的代码

2008/08/23 Javascript

jquery原创弹出层折叠效果点击折叠弹出一个层

2014/03/12 Javascript

jquery使用$(element).is()来判断获取的tagName

2014/08/24 Javascript

完美实现bootstrap分页查询

2015/12/09 Javascript

vue双向数据绑定原理探究(附demo)

2017/01/17 Javascript

Bootstrap入门教程一Hello Bootstrap初识

2017/03/02 Javascript

angular.js中解决跨域问题的三种方式

2017/07/12 Javascript

vue中各组件之间传递数据的方法示例

2017/07/27 Javascript

微信小程序中使用Promise进行异步流程处理的实例详解

2017/08/17 Javascript

js实现rem自动匹配计算font-size的示例

2017/11/18 Javascript

基于vue2.0动态组件及render详解

2018/03/17 Javascript

在vue项目中promise解决回调地狱和并发请求的问题

2020/11/09 Javascript

分析python服务器拒绝服务攻击代码

2014/01/16 Python

Python 2/3下处理cjk编码的zip文件的方法

2019/04/26 Python

python 使用opencv 把视频分割成图片示例

2019/12/12 Python

python误差棒图errorbar()函数实例解析

2020/02/11 Python

TensorBoard 计算图的可视化实现

2020/02/15 Python

python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解

2021/02/25 Python

canvas拼图功能实现代码示例

2018/11/21 HTML / CSS

波兰在线香水店：Perfumy.pl

2019/08/12 全球购物

会计电算化专业个人的自我评价

2013/11/24 职场文书

精彩的推荐信范文

2013/11/26 职场文书

事业单位请假制度

2014/01/13 职场文书

《动手做做看》教学反思

2014/04/09 职场文书

婚前财产协议书范本

2014/10/19 职场文书

网络管理员岗位职责

2015/02/12 职场文书

2015年生产车间工作总结

2015/04/22 职场文书

2015年银行大堂经理工作总结

2015/04/24 职场文书

同学聚会祝酒词

2015/08/10 职场文书

工伤调解协议书

2016/03/21 职场文书

Nginx实现负载均衡的项目实践

2022/03/18 Servers