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 相关文章推荐
web css实现整站样式互相切换
Oct 29 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
element中table高度自适应的实现
Oct 21 Javascript
vue项目中openlayers绘制行政区划
Dec 24 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
E路文章系统PHP
2006/12/11 PHP
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
简单的三步vuex入门
2018/05/20 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
python Opencv将图片转为字符画
2021/02/19 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
就业自荐信
2013/12/04 职场文书
给老师的道歉信
2014/01/11 职场文书
寒假安全保证书
2015/02/28 职场文书
小学运动会报道稿
2015/07/22 职场文书
小学感恩主题班会
2015/08/12 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
解析Java异步之call future
2021/06/14 Java/Android
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
vue自定义右键菜单之全局实现
2022/04/09 Vue.js