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

Prototype源码浅析 Enumerable部分(二)

Jan 18 Javascript

js时间日期格式化封装函数

Dec 02 Javascript

JS实现的简洁二级导航菜单雏形效果

Oct 13 Javascript

理解AngularJs指令

Dec 10 Javascript

jQuery防止重复绑定事件的解决方法

May 14 Javascript

【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

Jun 07 Javascript

详解webpack+vue-cli项目打包技巧

Jun 17 Javascript

JavaScript 完成注册页面表单校验的实例

Aug 19 Javascript

React + webpack 环境配置的方法步骤

Sep 07 Javascript

vue插件mescroll.js实现移动端上拉加载和下拉刷新

Mar 07 Javascript

微信小程序仿通讯录功能

Apr 09 Javascript

实例讲解React 组件

Jul 07 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 自写函数代码获取关键字去超链接

2010/02/08 PHP

PHP 记录访客的浏览信息方法

2018/01/29 PHP

基于jquery的兼容各种浏览器的iframe自适应高度的脚本

2010/08/13 Javascript

javascript实现原生ajax的几种方法介绍

2013/09/21 Javascript

javascript中拼接HTML字符串的最快、最好的方法

2014/06/07 Javascript

JavaScript获取网页中第一个链接ID的方法

2015/04/03 Javascript

JQuery使用index方法获取Jquery对象数组下标的方法

2015/05/18 Javascript

jQuery+PHP星级评分实现方法

2015/10/02 Javascript

javascript实现的网站访问量统计代码

2015/12/20 Javascript

多种js图片预加载实现方式分享

2016/02/19 Javascript

如何在Linux上安装Node.js

2016/04/01 Javascript

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

2016/11/25 Javascript

jQuery简单实现向列表动态添加新元素的方法示例

2017/12/25 jQuery

js操作二进制数据方法

2018/03/03 Javascript

vue.js-div滚动条隐藏但有滚动效果的实现方法

2018/03/03 Javascript

VUE Error: getaddrinfo ENOTFOUND localhost

2018/05/03 Javascript

基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

2019/06/10 jQuery

vue组件内部引入外部js文件的方法

2020/01/18 Javascript

Python人脸识别第三方库face_recognition接口说明文档

2019/05/03 Python

利用 CSS3 实现的无缝轮播功能代码

2017/09/25 HTML / CSS

澳大利亚第一的设计师礼服租赁网站：GlamCorner

2017/08/13 全球购物

美国Randolph太阳镜官网：美国制造的飞行员太阳镜和射击眼镜

2018/06/15 全球购物

西班牙最大的婴儿用品网上商店：Bebitus

2019/05/30 全球购物

学校安全检查制度

2014/01/27 职场文书

我的求职择业计划书

2014/04/04 职场文书

共青团员自我评价范文

2014/09/14 职场文书

运动会加油稿100字

2014/09/19 职场文书

2014年物业管理工作总结

2014/11/21 职场文书

2015年大学元旦晚会活动策划书

2014/12/09 职场文书

评先进个人材料

2014/12/29 职场文书

故宫的导游词

2015/01/31 职场文书

怎样写辞职信

2015/02/27 职场文书

法律讲堂观后感

2015/06/11 职场文书

房屋产权证明书

2015/06/19 职场文书

Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开

2021/11/21 数码科技

python文件与路径操作神器 pathlib

2022/04/01 Python