首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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方法分享
Sep 10 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
感言(394) 事迹材料(636) 接收函(23) 答谢词(97) 计划书(118) 教学反思(909) 方案(1080) 广播稿(323) 证明书(326) 辞职信(98)
You might like
PHP 数组入门教程小结
2009/05/20 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
javascript编程起步（第二课）
2007/01/10 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
原生js实现下拉框功能（支持键盘事件）
2017/01/13 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
vue实现购物车功能（商品分类）
2020/04/20 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
python实现飞机大战项目
2020/03/11 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
什么是View State？
2013/01/27 面试题
高中生评语大全
2014/04/25 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
内勤岗位职责范本
2015/04/13 职场文书
小学教师党员承诺书
2015/04/27 职场文书
纪检部部长竞选稿
2015/11/21 职场文书