怎么新建MySQL数据库
发布时间：2022-08-24
作者：admin
阅读：303
阅读：303
这篇文章给大家分享的是“用HTML5怎样写个时钟，代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。
到此这篇关于“用HTML5怎样写个时钟，代码是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！
1 <!doctype html> 2 <meta charset="UTF-8"> 3 <html> 4 <header></header> 5 <body> 6 7 <!--canvas标签画圆--> 8 <canvas id="canvas" width="500" height="500"> 9 您的浏览器不支持canvas标签，无法看到时钟 10 </canvas> 11 <script> 12 13 function drawClock(){ 14 15 //获取画布 16 var canvas=document.getElementById('canvas'); 17 //创建context 对象 18 var cxt=canvas.getContext("2d"); 19 //清除画布 20 cxt.clearRect(0,0,500,500); 21 var now =new Date(); 22 var sec=now.getSeconds(); 23 var min=now.getMinutes(); 24 var hour=now.getHours(); 25 //小时必须获取浮点类型(小时+分数转化成的小时) 26 hour=hour+min/60; 27 //问题 19:23:30 28 //将24小时进制转换为12小时 29 hour=hour>12?hour-12:hour; 30 //刻度盘 31 //设置画线的宽度 32 cxt.lineWidth=10; 33 //设置笔触的颜色 34 cxt.strokeStyle="blue"; 35 //开始路径 36 cxt.beginPath(); 37 //arc(x轴,y轴,半径,开始的度数,结束度数,是否顺时针); 38 cxt.arc(250,250,200,0,180,false); 39 //进行绘制 40 cxt.stroke(); 41 //结束路径 42 cxt.closePath(); 43 //时刻度 44 for(var i=0;i<12;i++){ 45 //需要在异次元空间所有要保存画布 46 cxt.save(); 47 //设置是真时针的宽度 48 cxt.lineWidth=7; 49 //设置时针的颜色 50 cxt.strokeStyle="#000"; 51 //先设置0，0点 52 cxt.translate(250,250); 53 //在设置旋转的角度（弧度=角度*π/180） 54 cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度，时针的间隔是30度 55 //开始路径 56 cxt.beginPath(); 57 //时针移动点 58 cxt.moveTo(0,-170); 59 //时针移动到 60 cxt.lineTo(0,-190); 61 //时针停止移动 62 cxt.closePath(); 63 cxt.stroke(); 64 cxt.restore(); 65 66 67 } 68 //秒刻度 69 for(var i=0;i<60;i++){ 70 //需要在异次元空间所有要保存画布 71 cxt.save(); 72 //设置是真时针的宽度 73 cxt.lineWidth=4; 74 //设置时针的颜色 75 cxt.strokeStyle="#000"; 76 //先设置0，0点 77 cxt.translate(250,250); 78 //在设置旋转的角度（弧度=角度*π/180） 79 cxt.rotate(i*6*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度 80 //开始路径 81 cxt.beginPath(); 82 //时针移动点 83 cxt.moveTo(0,-180); 84 //时针移动到 85 cxt.lineTo(0,-190); 86 //时针停止移动 87 cxt.closePath(); 88 cxt.stroke(); 89 cxt.restore(); 90 91 } 92 //时针 93 94 //需要在异次元空间保存所有画布 95 cxt.save(); 96 //设置时针的宽度 97 cxt.lineWidth=10; 98 //设置时针的颜色 99 cxt.strokeStyle="#000"; 100 //先设置0，0点 101 cxt.translate(250,250); 102 //设置选择弧度 103 cxt.rotate(hour*30*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度 104 //开始路径 105 cxt.beginPath(); 106 //时针移动点 107 cxt.moveTo(0,0); 108 //时针移动到 109 cxt.lineTo(0,-150); 110 //时针停止移动 111 cxt.closePath(); 112 cxt.stroke(); 113 cxt.restore(); 114 115 //分针 116 117 //需要在异次元空间保存所有画布 118 cxt.save(); 119 //设置分针的宽度 120 cxt.lineWidth=5; 121 //设置分针的颜色 122 cxt.strokeStyle="#000"; 123 //先设置0，0点 124 cxt.translate(250,250); 125 //设置旋转弧度 126 cxt.rotate(min*30*Math.PI/180);//角度*Math.PI/180=弧度分针的间隔是6度 127 //开始路径 128 cxt.beginPath(); 129 //时针移动点 130 cxt.moveTo(0,-150); 131 //时针移动到 132 cxt.lineTo(0,10); 133 //时针停止移动 134 cxt.closePath(); 135 cxt.stroke(); 136 cxt.restore(); 137 //秒针 138 //需要在异次元空间中所有需要保存画布 139 cxt.save(); 140 //设置分针的宽度 141 cxt.lineWidth=4; 142 //设置秒针的颜色 143 cxt.stroeStyle="red"; 144 //先设置00点 145 cxt.translate(250,250); 146 //设置旋转角度角度的公式为角度*Math.PI/180 147 cxt.rotate(sec*6*Math.PI/180); 148 //时针开始移动 149 cxt.beginPath(); 150 cxt.moveTo(0,-150); 151 cxt.lineTo(0,10); 152 //时针停止移动 153 cxt.closePath(); 154 cxt.stroke(); 155 //回到上一个状态,即 ctx.fillStyle="white"; 156 cxt.restore(); 157 158 //使用setInterval(代码,毫秒时间) 让时钟动起来 159 } 160 drawClock(); 161 setInterval(drawClock,1000); 162 163 </script> 164 165 </body> 166 </html>
效果图：
到此这篇关于“用HTML5怎样写个时钟，代码是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理