js实现手表表盘时钟与圆周运动


Posted in Javascript onSeptember 18, 2020

苹果手表表盘时钟与js圆周运动

实现结果

js实现手表表盘时钟与圆周运动

需求分析:

1、时钟时间按照北京时间进行显示;
2、时针、分针、秒针按照时钟运转标准进行运转;
3、小球跟随秒表围绕表盘进行圆周运动。

代码分析

1、html结构:时针、分针、秒针、小球分别用一个div,将他们一起放到一个大的div中;
2、css样式:表盘布局多使用相对定位与绝对定位,将表针与各时刻标刻移动到特定的位置;
3、js行为:为了实现动态获取时间,可以使用var now=new Date(),再利用定时器setInterval,实现每经过1s重新获取当前时间。

核心函数

时钟运动

function getTimeDeg(){
   //获取当前时间,计算在时钟上,时、分、秒对应转动角度
 var now=new Date();
 var s=now.getSeconds();
 var sDeg=s/60*360;
   var m=now.getMinutes();
 var mDeg=(m*60+s)/3600*360;
   var h=now.getHours();
   var hDeg=(h*3600+m*60+s)/(3600*12)*360;
 divH.style.transform=`rotate(${hDeg}deg)`;
 divM.style.transform=`rotate(${mDeg}deg)`;
 divS.style.transform=`rotate(${sDeg}deg)`;
 }

圆周运动

function circleMotion(){
   var now=new Date();
   var sball=now.getSeconds();
 var saDeg=sball/60*360-90;
   var r = 250;
   var radian = saDeg*Math.PI/180;
   var top = Math.cos(radian)*r;
   var left = Math.sin(radian)*r;
   ball.style.left= top+'px';
   ball.style.top = left+'px';
  }

完整源代码(复制可用)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>表盘时钟</title>
 <style>
  #circle{
   width: 500px;height: 500px;border-radius: 255px;
   position: relative;top: 50px;left: 500px;
   background: radial-gradient(black,grey);
   border:#f7f7f7 10px solid;
   box-shadow: 0px 0px 0px 2px #a3a4a6,0px 0px 0px 32px #dedfe1;
  }
  #ball{
   width: 30px;height: 30px;border-radius: 15px;
   background-color: red;position: absolute;
   margin-top: 235px;margin-left: 235px;
   z-index: 6;
  }
  #dian{
   width: 40px;height: 40px;border-radius: 20px;
   background-color:white;position: absolute;
   margin-top: 230px; margin-left: 230px;
   box-shadow:0px -15px 10px -7px #867c7c inset,0px 0px 2px 0px black ;
   z-index: 6;
  }
  #h{
 width:8px;height: 100px;background-color: white;
 position: absolute;border-radius: 8px;left: 246px;top: 150px;
   box-shadow:0px 0px 2px 1px #867c7c inset,0px 0px 1px 0px black ;
   z-index: 3;
   
 }
 #m{
 width:6px;height: 150px;background-color: white;
 position: absolute;top: 100px;left: 247px;border-radius: 6px;
   box-shadow:0px 0px 1px 0px #867c7c inset,0px 0px 1px 0px black ;
   z-index: 4;
   
 }
 #s{
 width:2px;height: 180px;background-color: red;
 position: absolute;top: 70px;left: 249px;border-radius: 2px;
   z-index: 5;
 }
 #s,#m,#h{
 transform-origin: center bottom;
 }
  .tip{
   width: 6px;height: 26px;border-radius: 3px;background-color: white;
   position: absolute;box-shadow:0px 0px 2px 1px #867c7c inset,0px 0px 1px 0px black ;
  }
  #time1{
   top: 34px;left: 372px;transform-origin:top center ;transform: rotate(30deg);
  }
  #time2{
   top: 125px;left: 463px;transform-origin:top center ;transform: rotate(60deg);
  }
  #time3{
   top: 230px;left: 475px;transform: rotate(90deg);
   width: 10px;height: 40px;border-radius: 5px;
  }
  #time4{
   top: 349px;left: 460px;transform-origin:bottom center ;transform: rotate(-60deg);
  }
  #time5{
   top: 440px;left: 369px;transform-origin:bottom center ;transform: rotate(-30deg);
  }
  #time6{
   top: 460px;left: 245px;width: 10px;height: 40px;border-radius: 5px;
  }
  #time7{
   top: 440px;left: 122px;transform-origin:bottom center ;transform: rotate(30deg);
  }
  #time8{
   top: 349px;left: 31px;transform-origin:bottom center ;transform: rotate(60deg);
  }
  #time9{
   top: 230px;left: 15px;transform: rotate(90deg);
   width: 10px;height: 40px;border-radius: 5px;
  }
  #time10{
   top: 124px;left: 30px;transform-origin:top center ;transform: rotate(-60deg);
  }
  #time11{
   top: 33px;left: 121px;transform-origin:top center ;transform: rotate(-30deg);
  }
  #time12{
   top: 0px;left: 245px;
   width: 10px;height: 40px;border-radius: 5px;
  }
 </style>
</head>
<body>
 <div id="circle">
  <div id="h"></div>
 <div id="m"></div>
  <div id="s"></div>
  <div id="ball" class="tip"></div>
  <div id="dian" class="tip"></div>
  <div id="time1" class="tip"></div>
  <div id="time2" class="tip"></div>
  <div id="time3" class="tip"></div>
  <div id="time4" class="tip"></div>
  <div id="time5" class="tip"></div>
  <div id="time6" class="tip"></div>
  <div id="time7" class="tip"></div>
  <div id="time8" class="tip"></div>
  <div id="time9" class="tip"></div>
  <div id="time10" class="tip"></div>
  <div id="time11" class="tip"></div>
  <div id="time12" class="tip"></div>
 </div>
 <script>
  //获取div节点
  var ball=document.getElementById("ball")
  var divS=document.getElementById("s");
 var divM=document.getElementById("m");
 var divH=document.getElementById("h");
  //调用函数,可删除,删除后需等待1s才能看到运转
 getTimeDeg();
  //设置间隔时间为1s的定时器,每1s运行一次函数
  setInterval(getTimeDeg,1000);
  //时间获取函数
  circleMotion();
  setInterval(circleMotion,1000);

  //时钟运动
 function getTimeDeg(){
   //获取当前时间,计算在时钟上,时、分、秒对应转动角度
 var now=new Date();
 var s=now.getSeconds();
 var sDeg=s/60*360;
   var m=now.getMinutes();
 var mDeg=(m*60+s)/3600*360;
   var h=now.getHours();
   var hDeg=(h*3600+m*60+s)/(3600*12)*360;
 divH.style.transform=`rotate(${hDeg}deg)`;
 divM.style.transform=`rotate(${mDeg}deg)`;
 divS.style.transform=`rotate(${sDeg}deg)`;
 }
  //圆周运动
  function circleMotion(){
   var now=new Date();
   var sball=now.getSeconds();
 var saDeg=sball/60*360-90;
   var r = 250;
   var radian = saDeg*Math.PI/180;
   var top = Math.cos(radian)*r;
   var left = Math.sin(radian)*r;
   ball.style.left= top+'px';
   ball.style.top = left+'px';
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
JS倒计时代码汇总
Nov 25 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
js点击选择文本的方法
Feb 09 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
javascript实现智能手环时间显示
Sep 18 #Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 #Javascript
js实现拖拽与碰撞检测
Sep 18 #Javascript
详解JavaScript 的执行机制
Sep 18 #Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 #Javascript
React倒计时功能实现代码——解耦通用
Sep 18 #Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 #Javascript
You might like
短波问题解答
2021/02/28 无线电
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
帝国cms常用标签汇总
2015/07/06 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
php use和include区别总结
2019/10/13 PHP
javascript日期格式化示例分享
2014/03/05 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
基于Python的关键字监控及告警
2017/07/06 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python通过文本和图片生成词云图
2020/05/21 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
Java多态性的定义以及类型
2014/09/16 面试题
酒店员工检讨书
2014/02/18 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
长征观后感
2015/06/09 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书