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>

很复杂的哦，请认真学习。
请继续期待下期博客。
我是人间仙子.
你的魔鬼

js的计时事件. 圆形时钟相关推荐

js使用计时事件制作的钟表
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <script type="text/javascript ...
Canvas圆形时钟
今天带来一个圆形时钟,用JQ编写的Canvas 代码.Canvas 的神奇之处就在于,可以自行绘制图片不需要外部引入,当你深入了解这项技术的时候,你也会忍不住赞叹他的神奇之处. 虽然我一再强调 ...
HTML画正方形钟表,html画圆形时钟
joining the pool (http://www.pool.ntp.org/join.html). #server 0.centos.pool.ntp.org iburst #注释掉原时钟服务 ...
通过video.js或原生事件统计实际观看视频时长，支持多视频时长统计
前言:1.根据评论提问,优化了视频统计逻辑,增加了网络卡顿时暂停计时,重新播放后重新计时的功能.根据以下下载地址可以下载完整代码示例, 更新于:2022年8月26号,2.新增通过原生事件的写法统计观看 ...
jq动画插件，自制基于vue的圆形时钟
首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个"超个性动画版本的个人简历",通过屏幕上不断打印内容,改变相应样 ...
android 自定义时钟,Android自定义控件之圆形时钟（续）
在上篇文章中,我向大家介绍了如何通过自定义View一步步画出一个漂亮的圆形时钟.如果你还没看的话,我不建议你接着往下看,因为这篇文章是接着上篇的文章,如果直接看的话可能会不知所云,所以还是建议你先看一 ...
一文学会JavaScript计时事件
文章目录 JavaScript 计时事件 setInterval() 方法 clearInterval() 方法 setTimeout() 方法 clearTimeout() 方法 JavaScrip ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...

js的计时事件. 圆形时钟

js的计时事件. 圆形时钟

js的计时事件. 圆形时钟相关推荐

最新文章

热门文章