js实现圆形钟表可以修改一下作为插件放到我们的项目中，对js有兴趣的也可以研究一下，对我们的js水平会有所提高哦~
代码演示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></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实现圆形钟表，有兴趣的还可以到搜索其他的源码或教程哦！
相关推荐：
js循环轮播图
js模仿聊天页面
js实现背景动画分裂
以上就是js实现圆形钟表的详细内容。