编程 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 解析json的代码

Dec 16 Javascript

真正的JQuery.ajax传递中文参数的解决方法

May 28 Javascript

jquery给图片添加鼠标经过时的边框效果

Nov 12 Javascript

JavaScript sup方法入门实例（把字符串显示为上标）

Oct 20 Javascript

浅谈jquery.fn.extend与jquery.extend区别

Jul 13 Javascript

node.js中module.exports与exports用法上的区别

Sep 02 Javascript

JavaScript用JSONP跨域请求数据实例详解

Jan 06 Javascript

vuejs+element-ui+laravel5.4上传文件的示例代码

Aug 12 Javascript

javaScript中indexOf用法技巧

Nov 26 Javascript

深入理解Antd-Select组件的用法

Feb 25 Javascript

JavaScript前端实现压缩图片功能

Mar 06 Javascript

Json实现传值到后台代码实例

Jun 30 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

POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)

2010/10/12 PHP

批量去除PHP文件中bom的PHP代码

2012/03/13 PHP

php获取操作系统语言代码

2013/11/04 PHP

ThinkPHP3.1新特性之动态设置自动完成和自动验证示例

2014/06/19 PHP

Linux php 中文乱码的快速解决方法

2016/05/13 PHP

用javascript实现的支持lrc歌词的播放器

2007/05/17 Javascript

JavaScript类和继承 this属性使用说明

2010/09/03 Javascript

jquery模拟按下回车实现代码

2011/09/20 Javascript

用jquery实现点击栏目背景色改变

2012/12/10 Javascript

jquery弹出框的用法示例(一)

2013/08/26 Javascript

jquery教程ajax请求json数据示例

2014/01/13 Javascript

JavaScript实现生成GUID（全局统一标识符）

2014/09/05 Javascript

js实现模拟计算器退格键删除文字效果的方法

2015/05/07 Javascript

jQuery中attr()与prop()函数用法实例详解(附用法区别)

2015/12/29 Javascript

ThinkJS中如何使用MongoDB的CURD操作

2016/12/13 Javascript

js实现三级联动效果（简单易懂）

2017/03/27 Javascript

深入理解Node中的buffer模块

2017/06/03 Javascript

详解基于vue-router的动态权限控制实现方案

2017/09/28 Javascript

浅谈vue方法内的方法使用this的问题

2018/09/15 Javascript

如何基于JS截获动态代码

2019/12/25 Javascript

JS实现图片懒加载(lazyload)过程详解

2020/04/02 Javascript

vuex的数据渲染与修改浅析

2020/11/26 Vue.js

python scatter散点图用循环分类法加图例

2019/03/19 Python

详解python的argpare和click模块小结

2019/03/31 Python

Django中URL的参数传递的实现

2019/08/04 Python

opencv设置采集视频分辨率方式

2019/12/10 Python

Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)

2020/04/08 Python

带你认识HTML5中的WebSocket

2015/05/22 HTML / CSS

在C语言中＂指针和数组等价＂到底是什么意思？

2014/03/24 面试题

护理专科自荐书范文

2014/02/18 职场文书

房地产促销活动方案

2014/03/01 职场文书

学校搬迁方案

2014/06/15 职场文书

2015年销售工作总结范文

2015/03/30 职场文书

2016年基层党组织公开承诺书

2016/03/25 职场文书

PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction

2022/04/12 PostgreSQL

Java实现注册登录跳转

2022/06/16 Java/Android