JS+HTML 5+CSS动态钟表

最新推荐文章于 2023-05-21 09:09:08 发布

lzc1971676155

最新推荐文章于 2023-05-21 09:09:08 发布

阅读量415

点赞数 1

分类专栏： Javascript 文章标签： HTML5+CSS+Javascript

本文链接：https://blog.csdn.net/lzc1971676155/article/details/99487397

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Canvas的使用：画布
在这里插入图片描述
圆arc(x,y,r,0,b)、直线（指定点到指定点起点：cxt.moveTo(x,y)、终点：cxt.lineTo(x,y)）、直线填充（strokeStyle()）、定时器setInterval(function(){函数},t)，函数的调用是一秒重绘，消除前一帧图像为 cxt.clearRect(x,y,width,height)
主要是表盘刻度的绘制，在网上看到别人使用的是translate(),我使用正弦、余弦函数完成。本来想用圆的公式，想了想好像更难，就放弃尝试了。

<!doctype html>
<html lang="en">

		 <head>
			  <meta charset="UTF-8">
			  <meta name="Generator" content="EditPlus®">
			  <title>Document</title>
			  <style type="text/css">
				#myCanvas{
					border: 1px solid red;
					position: absolute;
				}
				#demo{
					margin-left: 226px;
					padding-top: 39px;
				}
				#date{
					margin-left: 217px;
					padding-top: 339px;
				}
				#day{
					margin-left: 232px;
					margin-top: -8px;
				}
			  </style>
		 </head>
			
		 <body>
			<canvas id = "myCanvas" width = "500px" height = "500px">
			</canvas>
			<h2 id = 'demo'>时钟</h2>
			<h3 id = 'date'><h3>
			<h4 id = 'day'><h4>
		<script type="text/javascript">
			var canvas = document.getElementById('myCanvas');
			var cxt = canvas.getContext('2d');
				//秒针动画
				setInterval(function(){
						clockPane();
						mte(cxt);
					},1000);
	//表盘绘制
function clockPane(){
	var time = new Date();
	var h = time.getHours();
	var m = time.getMinutes();
	var s = time.getSeconds();
		if(m<10){
			m = '0' +m;
		}
		if(s<10){
			s = '0' +s;
		}
	        document.getElementById('date').innerHTML = h + ':' + m + ':' + s;
	var day;
			switch(time.getDay()){
				case 0:
					day = '星期日';
					break;
				case 1:
					day = '星期一';
					break;
				case 2:
					day = '星期二';
					break;
				case 3:
					day = '星期三';
					break;
				case 4:
					day = '星期四';
					break;
				case 5:
					day = '星期五';
					break;
				case 6:
					day = '星期六';
					break;
			}
			document.getElementById('day').innerHTML = day;
			cxt.clearRect(0,0,500,500);
			cxt.beginPath();
			cxt.lineWidth = 2;
			cxt.strokeStyle = 'black';
			//画圆
			cxt.arc(250,250,150,0,2*Math.PI);
			cxt.arc(250,250,155,0,2*Math.PI);
			//画秒针刻度
	for(var i = 0; i< 60; i ++){
			cxt.moveTo(250+145*Math.cos((i*Math.PI/30)),250-145*Math.sin((i*Math.PI/30)));
			cxt.lineTo(250+150*Math.cos((i*Math.PI/30)),250-150*Math.sin((i*Math.PI/30)));
					}
			//画时、分针刻度
	for(var i = 0; i< 30; i ++){
			cxt.moveTo(250+140*Math.cos((i*Math.PI/6)),250-140*Math.sin((i*Math.PI/6)));
			cxt.lineTo(250+150*Math.cos((i*Math.PI/6)),250-150*Math.sin((i*Math.PI/6)));
					}
			cxt.stroke();
			cxt.closePath();
}
//时、分、秒针绘制
function mte(ctx){
				//秒针
	var d = new Date();   
	var i = -d.getSeconds()+15;    //获取现在时间的秒数
			ctx.beginPath();
			ctx.strokeStyle = "Darkorange";
			ctx.lineWidth = 1;
			ctx.moveTo(250,250);
			ctx.lineTo(250+130*Math.cos((i*Math.PI/30)),250-130*Math.sin((i*Math.PI/30)));
			ctx.stroke();
			ctx.closePath();
				//分针
	var m = -d.getMinutes()+15;
			ctx.beginPath();
			ctx.lineWidth = 2;
			cxt.strokeStyle = 'black';
			ctx.moveTo(250,250);
			ctx.lineTo(250+115*Math.cos((m*Math.PI/30)),250-115*Math.sin((m*Math.PI/30)));
			ctx.stroke();
			ctx.closePath();
				//时针
	var h = d.getHours();
		if(h>12){
			 h = h - 12;
		}
			ctx.beginPath();
			ctx.lineWidth = 3;
			cxt.strokeStyle = 'black';
			ctx.moveTo(250,250);
			ctx.lineTo(250+100*Math.cos((h-3)*Math.PI/6+d.getMinutes()*Math.PI/360),
			           250+100*Math.sin((h-3)*Math.PI/6+d.getMinutes()*Math.PI/360));
			           //需要注意的是Math.cos(x)中x的值必须是弧度值，因为时针计算时需要时针时间加上分针时间来计算时针走过的角度。
			ctx.stroke();
			ctx.closePath();
		}
			</script>
		 </body>

</html>

重用的代码很多，需要简化。
数学很重要，要计算，没事多看看。