js计时事件实现圆形时钟


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了js圆形时钟效果的具体代码,供大家参考,具体内容如下

js计时事件实现圆形时钟

代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>时钟</title>
 <style>
 *{margin: 0; padding: 0;}

 div.dd{
  margin: 0 auto;
  width: 400px;
  padding-top: 100px;
 }
 </style>
</head>
<body>
<div class="dd">
 <canvas id="clock" height="400px" width="400px">你的浏览器不支持canvas</canvas>
</div>
<script type="text/javascript">
 (function(doc){
 var can = doc.getElementById("clock");
 var con = can.getContext("2d");//创建一个2d上下文
 con.translate(200, 200);//重新确定坐标原点(确定圆心位置)
 
 //外圆
 con.beginPath();
 con.fillStyle = '#fff';
 con.arc(0, 0, 200, 0, Math.PI*2, false);
 con.fill();
 
 //内圆
 con.beginPath();
 con.fillStyle = '#aaa';
 con.arc(0, 0, 195, 0, Math.PI*2, false);
 con.fill();
 
 //绘制刻度
 con.beginPath();
 con.font = "bold 20px sans-serif";
 con.textAlign = "center";
 con.textBaseline = "middle"
 con.fillStyle = '#000000';
 con.fillText("12", 0, -170);
 con.fillText("3",170,0);
 con.fillText("6",0,170);
 con.fillText("9",-170,0);
 con.fillText("1",84,-147.224);
 con.fillText("2",147.224,-84);
 con.fillText("4",147.224,84);
 con.fillText("5",84,147.224);
 con.fillText("7",-84,147.224);
 con.fillText("8",-147.224,84);
 con.fillText("10",-147.224,-84);
 con.fillText("11",-84,-147.224);
 
 //获取当前时间
 var d = new Date(), time ={};
 time.H = d.getHours()%12;
 time.M = d.getMinutes();
 time.S = d.getSeconds();
 
 function getTime(){
  time.S++;
  if(time.S > 59){
  time.S = 0;
  time.M++;
  if(time.M > 60){
   time.M = 0;
   time.H++;
   if(time.H > 11){
   time.H = 0;
   }
  }
  }
  canvasTimeLine();
 }
 
 //将角度转为弧度
 function numToDeg(num){
  return ((num*6 - 90)*0.0174444444444444);
 
 }
 //确定刻度位置
 function computePositionByLenDeg(len, deg){
  return {
  x: len*Math.cos(deg),
  y: len*Math.sin(deg)
  }
 }
 //绘制刻度
 function canvasLineMintus(){
  for(var i = 0;i<60; i++){
  var rec = 180;
  con.beginPath();
  con.lineWidth = 4;
  if(i%5 != 0){
   con.lineWidth = 1;
   rec = 184
  }
 
  var beinDeg = numToDeg(i),
   beginPot = computePositionByLenDeg(rec, beinDeg),
   endPot = computePositionByLenDeg(190, beinDeg);
  con.moveTo(beginPot.x, beginPot.y);
  con.lineTo(endPot.x, endPot.y);
  con.stroke();
  }
 }
 
 function canvasTimeLine(){
  var sDeg = numToDeg(time.S),
   mDeg = numToDeg(time.M),
   hDeg = numToDeg(time.H*5 + Math.floor(time.M/12)),
   sPot = computePositionByLenDeg(150, sDeg),
   mPot = computePositionByLenDeg(135, mDeg),
   hPot = computePositionByLenDeg(110, hDeg);
 
  //时钟表面
  con.beginPath();
  con.fillStyle = '#ddd';
  con.arc(0, 0, 156, 0, Math.PI*2, false);
  con.fill();
 
 
 
  //时针
  con.beginPath();
  con.moveTo(0, 0);
  con.lineTo(hPot.x, hPot.y);
  con.lineWidth = 6;
  con.strokeStyle = "#333";
  con.stroke();
 
  //分针
  con.beginPath();
  con.moveTo(0, 0);
  con.lineTo(mPot.x, mPot.y);
  con.lineWidth = 4;
  con.strokeStyle = "#333";
  con.stroke();
 
  //秒针
  con.beginPath();
  con.moveTo(0, 0);
  con.lineTo(sPot.x, sPot.y);
  con.lineWidth = 2;
  con.strokeStyle = "#ff0000";
  con.stroke();
 
  //针心
  con.beginPath();
  con.fillStyle = '#aaaaaa';
  con.arc(0, 0, 8, 0, Math.PI*2, false);
  con.fill();
  con.beginPath();
  con.fillStyle = '#f00';
  con.arc(0, 0, 4, 0, Math.PI*2, false);
  con.fill();
 
 }
 canvasLineMintus();
 getTime();
 
 setInterval(getTime, 1000);
 
 })(document);
</script>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 #Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 #Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 #Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 #Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 #Javascript
JavaScript判断数组类型的方法
Oct 23 #Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 #Javascript
You might like
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php判断表是否存在的方法
2015/06/18 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP文件操作实例总结
2016/09/27 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
php实现websocket实时消息推送
2018/03/30 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JS delegate与live浅析
2013/12/21 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
vuejs如何配置less
2017/04/25 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
浅析vue-router原理
2018/10/19 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
Python爬取读者并制作成PDF
2015/03/10 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
土建专业大学生自荐信范文
2014/04/09 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书