js implements round clock-JS Tutorial-php.cn

js implements round clock

韦小宝

Release： 2017-11-22 11:06:04

Original

2668 people have browsed it

jsTo implement a circular clock, you can modify it and put it into our project as a plug-in. Those who are interested in js can also study it. For our jsThe level will be improved~

js implements round clock

Code demonstration:

<!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=&#39;24px 宋体&#39;
					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>

Copy after login

The above is the js implementation of a round clock, if you are interested You can also go to PHP中文网 to search for other source codes or tutorials!

Related recommendations:

JS loop carousel image

JS imitation chat page

js realizes background animation split

The above is the detailed content of js implements round clock. For more information, please follow other related articles on the PHP Chinese website!