js는 둥근 시계를 구현합니다.
- 韦小宝원래의
- 2017-11-22 11:06:042612검색
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 중국어 웹사이트에서 다른 소스 코드나 튜토리얼을 검색하실 수 있습니다!
관련 추천:
위 내용은 js는 둥근 시계를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.