Rumah > Artikel > hujung hadapan web > js实现圆形钟表
js实现圆形钟表可以修改一下作为插件放到我们的项目中,对js有兴趣的也可以研究一下,对我们的js水平会有所提高哦~
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP中文网</title> <style> </style> </head> <body> <canvas id="can" width="500" height="500"> </canvas> <script> var can=document.getElementById("can") var ctx=can.getContext("2d") function click(){ ctx.clearRect(0,0,500,500) /*===========圆====================*/ ctx.beginPath() ctx.lineWidth=10 ctx.strokeStyle="#ccc" ctx.arc(250,250,210,0,Math.PI*2) ctx.stroke() ctx.closePath() /*==================刻度==================*/ for(var i=0;i<60;i++){ ctx.save() ctx.translate(250,250) ctx.beginPath() ctx.rotate(i*6*Math.PI/180) ctx.lineWidth=6 ctx.strokeStyle="#000" ctx.moveTo(0,-200) ctx.lineTo(0,-180) ctx.stroke() ctx.closePath() ctx.restore() } for(var i=12;i>0;i--){ ctx.save() ctx.beginPath() ctx.translate(250,250) ctx.rotate(i*30*Math.PI/180) ctx.font='24px 宋体' if(i<6){ ctx.fillText(i,-9,-144) }else if(i==6){ ctx.fillText(9,-9,-144) }else if(i<=12){ ctx.fillText(i,-9,-144) } ctx.lineWidth=8 ctx.strokeStyle="#f00" ctx.moveTo(0,-200) ctx.lineTo(0,-170) ctx.stroke() ctx.closePath() ctx.restore() } var str=new Date() h=str.getHours() m=str.getMinutes() s=str.getSeconds() /*====================数字===============================*/ /*=====================时针===========================*/ ctx.save() ctx.translate(250,250) ctx.beginPath() ctx.rotate(h*Math.PI/6) ctx.lineWidth=8 ctx.strokeStyle="purple" ctx.moveTo(0,-100) ctx.lineTo(0,10) ctx.stroke() ctx.closePath() ctx.restore() /*=====================分针===========================*/ ctx.save() ctx.translate(250,250) ctx.beginPath() ctx.rotate(m*Math.PI/30) ctx.lineWidth=6 ctx.strokeStyle="gold" ctx.moveTo(0,-120) ctx.lineTo(0,10) ctx.stroke() ctx.closePath() ctx.restore() /*=====================秒针===========================*/ ctx.save() ctx.translate(250,250) ctx.beginPath() ctx.rotate(s*6*Math.PI/180) ctx.lineWidth=4 ctx.strokeStyle="greenyellow" ctx.moveTo(0,-140) ctx.lineTo(0,10) ctx.stroke() ctx.closePath() ctx.restore() } setInterval(click,1000) </script> </body> </html>
以上就是js实现圆形钟表,有兴趣的还可以到PHP中文网搜索其他的源码或教程哦!
相关推荐:
Atas ialah kandungan terperinci js实现圆形钟表. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!