js implementiert Round Clock-js-Tutorial-php.cn

js implementiert Round Clock

韦小宝

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

Original

2663 Leute haben es durchsucht

js kann geändert werden, um eine kreisförmige Uhr als Plug-in zu implementieren und in unser Projekt einzufügen. Wer sich für js interessiert, kann es auch für unser jsDas Level wird verbessert~

js implementiert Round Clock

Codedemonstration:

<!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>

Nach dem Login kopieren

Das Obige ist die js-Implementierung Wenn Sie interessiert sind, können Sie auch auf der

PHP Chinese-Website nach anderen Quellcodes oder Tutorials suchen!

Verwandte Empfehlungen:

JS-Loop-Karusselldiagramm

JS-Imitations-Chat-Seite

js realisiert die Aufteilung der Hintergrundanimation

Das obige ist der detaillierte Inhalt vonjs implementiert Round Clock. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!