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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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
PHP仿微信发红包领红包效果
2016/10/30 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
python中self原理实例分析
2015/04/30 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
python如何查看微信消息撤回
2018/11/27 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python实现整数的二进制循环移位
2019/03/08 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python脚本定时发送邮件
2020/12/22 Python
大三学生入党思想汇报
2014/01/02 职场文书
实习生的自我评价
2014/01/08 职场文书
学校大课间活动方案
2014/01/30 职场文书
大型车展策划方案
2014/02/01 职场文书
学生评语集锦
2015/01/04 职场文书
初中体育课教学反思
2016/02/16 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
详细分析PHP7与PHP5区别
2021/06/26 PHP