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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
Javascript 入门基础学习
Mar 10 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
JS实现密码框效果
2020/09/10 Javascript
Python3.7中安装openCV库的方法
2018/07/11 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python 下载及安装详细步骤
2019/11/04 Python
python动态规划算法实例详解
2020/11/22 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
本科生详细的自我评价
2013/09/19 职场文书
青蓝工程实施方案
2014/03/27 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
房屋所有权证明
2014/10/20 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
人事聘任通知
2015/04/21 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
python实现局部图像放大
2021/11/17 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL