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

JQuery最佳实践之精妙的自定义事件

Aug 11 Javascript

jQuery探测位置的提示弹窗(toolTip box)详细解析

Nov 14 Javascript

JavaScript中的typeof操作符用法实例

Apr 05 Javascript

基于jquery ui的alert,confirm方案（支持换肤）

Apr 03 Javascript

jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

Aug 22 Javascript

分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

Jan 10 Javascript

JavaScript判断变量是否为数组的方法(Array)

Feb 24 Javascript

vue如何获取点击事件源的方法

Aug 10 Javascript

React-Native使用Mobx实现购物车功能

Sep 14 Javascript

微信小程序wx.request实现后台数据交互功能分析

Nov 25 Javascript

详解React之父子组件传递和其它一些要点

Jun 25 Javascript

基于原生JS封装的Modal对话框插件的示例代码

Sep 09 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

使用 php4 加速 web 传输

2006/10/09 PHP

PHP中error_reporting()函数的用法(修改PHP屏蔽错误)

2011/07/01 PHP

PHP文件注释标记及规范小结

2012/04/01 PHP

PHP判断是手机端还是PC端 PHP判断是否是微信浏览器

2017/03/15 PHP

PHP中include和require的区别实例分析

2017/05/07 PHP

PHP操作redis实现的分页列表，新增，删除功能封装类与用法示例

2018/08/04 PHP

win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法

2018/09/16 PHP

PHP中rename()函数的妙用讲解

2019/02/28 PHP

10款非常有用的 Ajax 插件分享

2012/03/14 Javascript

JavaScript 判断用户输入的邮箱及手机格式是否正确

2013/12/08 Javascript

javascript数组输出的两种方式

2015/01/13 Javascript

jquery简单实现幻灯片的方法

2015/08/03 Javascript

微信支付如何实现内置浏览器的H5页面支付

2015/09/25 Javascript

jQuery+JSON实现AJAX二级联动实例分析

2015/12/18 Javascript

用自定义图片代替原生checkbox实现全选,删除以及提交的方法

2016/10/18 Javascript

Sublime Text新建.vue模板并高亮(图文教程)

2017/10/26 Javascript

Angular实现的table表格排序功能完整示例

2017/12/22 Javascript

JavaScript数组、json对象、eval()函数用法实例分析

2019/02/21 Javascript

Vue源码学习之关于对Array的数据侦听实现

2019/04/23 Javascript

[00:47]DOTA2荣耀之路6：天火，天火！

2018/05/30 DOTA

python抓取网页中图片并保存到本地

2015/12/01 Python

用ReactJS和Python的Flask框架编写留言板的代码示例

2015/12/19 Python

Python 专题三字符串的基础知识

2017/03/19 Python

解决python 3 urllib 没有 urlencode 属性的问题

2019/08/22 Python

Django实现简单网页弹出警告代码

2019/11/15 Python

Python实现将蓝底照片转化为白底照片功能完整实例

2019/12/13 Python

关于Python 中的时间处理包datetime和arrow的方法详解

2020/03/19 Python

解决Django no such table: django_session的问题

2020/04/07 Python

瑞典领先的汽车零部件网上零售商：bildelaronline24.se

2017/01/12 全球购物

日本最大级玩偶手办购物：あみあみ Amiami

2018/04/23 全球购物

银行简历自我评价

2014/02/11 职场文书

学校交通安全责任书

2014/08/25 职场文书

诉讼代理人授权委托书

2014/10/11 职场文书

JavaScript实现淘宝商品图切换效果

2021/04/29 Javascript

Python实现生成bmp图像的方法

2021/06/13 Python

在CSS中使用when/else的方法

2022/01/18 HTML / CSS