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

js cookies实现简单统计访问次数

Nov 24 Javascript

40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

Dec 31 Javascript

JS判定是否原生方法

Jul 22 Javascript

JQuery验证jsp页面属性是否为空(实例代码)

Nov 08 Javascript

js中对象的声明方式以及数组的一些用法示例

Dec 11 Javascript

jquery实现在页面加载的时自动为日期插件添加当前日期

Aug 20 Javascript

ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

Sep 06 Javascript

微信小程序页面之间传参实例详解

Jan 13 Javascript

vue如何引入sass全局变量

Jun 28 Javascript

react实现换肤功能的示例代码

Aug 14 Javascript

javascript异步编程的六种方式总结

May 17 Javascript

微信小程序自定义扫码功能界面的实现代码

Jul 02 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的array_multisort()使用方法介绍

2012/05/16 PHP

php将gd生成的图片缓存到memcache的小例子

2013/06/05 PHP

php常用ODBC函数集(详细)

2013/06/24 PHP

Thinkphp多文件上传实现方法

2014/10/31 PHP

wordpress安装过程中遇到中文乱码的处理方法

2015/04/21 PHP

PHP开发中AJAX技术的简单应用

2015/12/11 PHP

php mailer类调用远程SMTP服务器发送邮件实现方法

2016/03/04 PHP

Laravel框架实现利用中间件进行操作日志记录功能

2018/06/06 PHP

PHP使用HTML5 FormData对象提交表单操作示例

2019/07/02 PHP

解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码

2011/05/28 Javascript

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

2013/11/12 Javascript

JS版的date函数（和PHP的date函数一样）

2014/05/12 Javascript

jquery实现搜索框常见效果的方法

2015/01/22 Javascript

JS实现带圆弧背景渐变效果的导航菜单代码

2015/10/13 Javascript

Javascript前端经典的面试题及答案

2017/03/14 Javascript

Angular.js中下拉框实现渲染html的方法

2017/06/18 Javascript

shiro授权的实现原理

2017/09/21 Javascript

javascript 作用于作用域链的详解

2017/09/27 Javascript

vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

2017/10/12 Javascript

vue项目实现表单登录页保存账号和密码到cookie功能

2018/08/31 Javascript

JS中min函数实例讲解

2019/02/18 Javascript

基于JavaScript实现猜数字游戏代码实例

2020/07/30 Javascript

微信小程序实现简单的select下拉框

2020/11/23 Javascript

python3 打开外部程序及关闭的示例

2018/11/06 Python

python 计算一个字符串中所有数字的和实例

2019/06/11 Python

python环境搭建和pycharm的安装配置及汉化详细教程（零基础小白版）

2020/08/19 Python

欧舒丹澳洲版：L’OCCITANE

2017/07/17 全球购物

SQL Server里面什么样的视图才能创建索引

2015/04/17 面试题

艺术专业大学生自我评价

2013/09/22 职场文书

婚礼证婚人证婚词

2014/01/13 职场文书

小学开学寄语

2014/01/19 职场文书

护士自我推荐信范文

2015/03/24 职场文书

搭讪开场白台词大全

2015/05/28 职场文书

2015年教务主任工作总结

2015/07/22 职场文书

Nginx+Tomcat负载均衡多实例详解

2022/04/11 Servers

HTML静态页面获取url参数和UserAgent的实现

2022/08/05 HTML / CSS