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 相关文章推荐
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
vue实现div单选多选功能
Jul 16 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js中this用法实例详解
2015/05/05 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Django组件content-type使用方法详解
2019/07/19 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python中字典增加和删除使用方法
2020/09/30 Python
酒店服务与管理毕业生求职信
2013/11/02 职场文书
保险公司早会主持词
2014/03/22 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python