H5+JS制作钟表

源代码:

 <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<center>
    			<canvas width="600" height="600" id="time-paint"></canvas>
    		</center>
    		<script>
    			var context = document.getElementById("time-paint").getContext("2d");
    			context.translate(300, 300); //原点设置
    			setInterval("draw()",1000);//隔1秒执行函数一次
    			function draw() {
    				//每次绘制图形之前 先清空画布所有的区域
    				context.clearRect(-300, -300, 600, 600);
    				var time = new Date();
    				var hour = time.getHours();
    				var minutes = time.getMinutes();
    				var seconds = time.getSeconds();
    				var dateNum = time.getFullYear() + "年" +
    					(time.getMonth() > 9 ? time.getMonth() : "0" + time.getMonth()) + "月" +
    					(time.getDay() > 9 ? time.getDay() : "0" + time.getDay()) + "日";
    				var timeNum = (hour > 9 ? hour : "0" + hour) +
    					":" + (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds);
    				//钟表边
    				context.beginPath();
    				context.arc(0, 0, 200, Math.PI * 0, Math.PI * 2);
    				context.strokeStyle = "#660000"
    				context.lineWidth = "10";
    				context.fillStyle = "rgba(100,150,185,0.2)";
    				context.stroke();
    				context.fill();
    				context.closePath();
    				//中心原点
    				context.beginPath();
    				context.arc(0, 0, 13, Math.PI * 0, Math.PI * 2);
    				context.fillStyle = "white";
    				context.fill();
    				context.closePath();
    				
    				for(var i = 0; i < 60; i++) {
    					context.beginPath();
    					context.moveTo(0, -186);
    					context.lineTo(0, -192);
    					context.strokeStyle = "#BBBB00";
    					context.lineWidth = "3";
    					context.stroke();
    					context.closePath();
    					context.rotate(1 / 30 * Math.PI); //旋转坐标系
    				}
    				for(var i = 0; i < 12; i++) {
    					context.beginPath();
    					context.moveTo(0, -180);
    					context.lineTo(0, -192);
    					context.strokeStyle = "#AA7700";
    					context.lineWidth = "5";
    					context.stroke();
    					context.closePath();
    					context.rotate(1 / 6 * Math.PI); //旋转坐标系
    				}
                  //数字显示
    				context.beginPath();
    				context.font = "22px 'franklin gothic medium'";
    				context.strokeStyle = "black";
    				context.lineWidth = "1";
    				context.strokeText(dateNum, -85, 50);
    				context.strokeText(timeNum, -45, 80);
    				context.closePath();
    
    				//时针
    				var hours = hour >= 12 ? hour - 12 : hour;
    				context.beginPath();
    				context.rotate((hours + minutes / 60) * 30 / 180 * Math.PI);
    				context.moveTo(0, 30);
    				context.lineTo(0, -120);
    				context.strokeStyle = "#990000";
    				context.lineWidth = "8";
    				context.stroke();
    				context.closePath();
    				context.rotate(-(hours+minutes/60) * 30 / 180 * Math.PI);
    				//分针
    				context.rotate(minutes * 6 / 180 * Math.PI);
    				context.beginPath();
    				context.moveTo(0, 25);
    				context.lineTo(0, -150);
    				context.lineWidth = "5";
    				context.strokeStyle = "orange";
    				context.stroke();
    				context.closePath();
    				context.rotate(-minutes * 6 / 180 * Math.PI);
    				//绘制秒针
    				context.rotate(seconds * 6 / 180 * Math.PI);
    				context.beginPath();
    				context.moveTo(0, 30);
    				context.lineTo(0, -175);
    				context.lineWidth = '3';
    				context.strokeStyle = "red";
    				context.stroke();
    				context.closePath();
    				context.beginPath();
    				context.arc(0, -160, 5, Math.PI * 0, Math.PI * 2);
    				context.fillStyle = "red";
    				context.fill();
    				context.closePath();
    				context.rotate(-seconds * 6 / 180 * Math.PI);
    				//中心原点
    				context.beginPath();
    				context.arc(0, 0, 9, Math.PI * 0, Math.PI * 2);
    				context.fillStyle = "red";
    				context.fill();
    				context.closePath();
    			}
    		</script>
    	</body>
    </html>

效果图
显示效果

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值