编程 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设置首页和收藏页面的小例子

Nov 11 Javascript

对比分析json及XML

Nov 28 Javascript

Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

Sep 15 Javascript

基于Vue2.0的分页组件

Mar 16 Javascript

原生JS实现隐藏显示图片 JS实现点击切换图片效果

Jan 27 Javascript

Vue.js中的图片引用路径的方式

Jul 28 Javascript

Vuex入门到上手教程

Jun 20 Javascript

分享5个顶级的JavaScript Ajax组件库

Sep 16 Javascript

CryptoJS中AES实现前后端通用加解密技术

Dec 18 Javascript

vue vant Area组件使用详解

Dec 09 Javascript

基于JavaScript判断两个对象内容是否相等

Jan 10 Javascript

Vue跨域请求问题解决方案过程解析

Aug 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

Thinkphp自定义代码生成工具及用法说明(附下载地址)

2016/05/27 PHP

php+ajax无刷新上传图片的实现方法

2016/12/06 PHP

php微信公众号开发之简答题

2018/10/20 PHP

jQuery判断元素是否是隐藏的代码

2011/04/24 Javascript

国外大牛IE版本检测！现在IE都到9了，IE检测代码

2012/01/04 Javascript

jquery.form.js实现将form提交转为ajax方式提交的方法

2015/04/07 Javascript

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

2016/02/03 Javascript

有关easyui-layout中的收缩层无法显示标题的解决办法

2016/05/10 Javascript

JS扩展类，克隆对象与混合类实例分析

2016/11/26 Javascript

Bootstrap缩略图的创建方法

2017/03/22 Javascript

ionic2打包android时gradle无法下载的解决方法

2017/04/05 Javascript

vue中使用ueditor富文本编辑器

2018/02/08 Javascript

jQuery实现获取动态添加的标签对象示例

2018/06/28 jQuery

vue3.0 CLI - 3.2 路由的初级使用教程

2018/09/20 Javascript

vue+element模态框中新增模态框和删除功能

2019/06/11 Javascript

小程序如何定位所在城市及发起周边搜索

2020/02/11 Javascript

深入了解Vue.js 混入（mixins）

2020/07/23 Javascript

echarts饼图各个板块之间的空隙如何实现

2020/12/01 Javascript

Python实现多进程导入CSV数据到 MySQL

2017/02/26 Python

定制FileField中的上传文件名称实例

2017/08/23 Python

使用Python通过win32 COM实现Word文档的写入与保存方法

2018/05/08 Python

Python3.4 tkinter,PIL图片转换

2018/06/21 Python

Python单元测试简单示例

2018/07/03 Python

flask入门之文件上传与邮件发送示例

2018/07/18 Python

ProBikeKit德国：在线公路自行车专家

2018/06/03 全球购物

FC-Moto丹麦：欧洲最大的摩托车服装和头盔商店之一

2019/08/20 全球购物

单位单身证明范本

2014/01/11 职场文书

网络工程师自荐书范文

2014/04/01 职场文书

公务员爱岗敬业演讲稿

2014/08/26 职场文书

高校师德师风自我剖析材料

2014/09/29 职场文书

2015年司法所工作总结

2015/04/27 职场文书

上帝也疯狂观后感

2015/06/09 职场文书

幼儿园小班班务总结

2015/08/03 职场文书

孩子满月酒答谢词

2015/09/30 职场文书

Python 居然可以在 Excel 中画画你知道吗

2022/02/15 Python

Django数据库(SQlite)基本入门使用教程

2022/07/07 Python