初学H5写时钟

最新推荐文章于 2024-01-14 21:43:58 发布

学习的前端的头疼小白

最新推荐文章于 2024-01-14 21:43:58 发布

阅读量109

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m210516/article/details/124228859

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#can{

border: 1px solid black;

}

</style>

</head>

<body>

</body>

let can=document.getElementById('can')

let c = can.getContext('2d')

console.log(c)

function shi(){

let deg=Math.PI/180;

let dt=new Date()

let h =dt.getHours();

h=h>12?h-12:h;

let m=dt.getMinutes();

let s=dt.getSeconds()

c.clearRect(0,0,600,600)

c.beginPath()

c.strokeStyle='green'

c.lineWidth='5'

c.arc(300,300,250,0,360*deg);

c.stroke()

c.closePath()

// c.translate(300,300)

c.beginPath()

c.strokeStyle='silver'

c.arc(300,300,230,0,360*deg);

c.stroke()

c.closePath()

c.beginPath()

c.strokeStyle='silver'

c.arc(300,300,10,0,360*deg);

c.stroke()

c.closePath()

for( var i=0;i<60;i++){

c.save()

c.translate(300,300)

c.rotate(deg*6*i)

c.beginPath()

c.strokeStyle='silver'

c.lineWidth='5'

c.moveTo(0,240);

c.lineTo(0,248)

c.stroke()

c.closePath()

c.restore()

}

for( var i=0;i<12;i++){

c.save()

c.translate(300,300)

c.rotate(deg*30*i)

c.beginPath()

c.strokeStyle='green'

c.lineWidth='8'

c.moveTo(0,230);

c.lineTo(0,248)

c.stroke()

c.closePath()

c.restore()

}

//时

// c.rotate(-30*deg)

c.save()

c.translate(300,300)

c.beginPath()

c.rotate(30*deg*h+(30/60)*m*deg)

c.strokeStyle='green'

c.lineWidth='8'

c.moveTo(0,-100);

c.lineTo(0,0)

c.stroke()

c.closePath()

c.restore();

//分

c.save()

c.translate(300,300)

c.rotate(50*deg)

c.beginPath()

c.rotate(6*deg*m+(6/60)*s*deg-60*deg)

c.strokeStyle='silver'

c.lineWidth='6'

c.moveTo(0,-150);

c.lineTo(0,0)

c.stroke()

c.closePath()

c.restore();

//秒

c.save()

c.translate(300,300)

c.beginPath()

c.rotate(6*deg*s)

c.strokeStyle='green'

c.lineWidth='3'

c.moveTo(0,-200);

c.lineTo(0,0)

c.stroke()

c.closePath()

c.restore()

}

shi(0)

setInterval(function(){

shi(1)

},1000)

</script>

</html>

学习的前端的头疼小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学H5写时钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
复制链接

扫一扫