H5简易时钟

PROMULGATOR

菇凉……我是好人

吉林省长春市

← 解决IE下不支持placeholder属性

→ 页面多个倒计时

相关代码

CSS3 H5 星系动画

实用H5表单属性

贪吃蛇H5游戏

H5简历（没使用插件）

h5 from表单，canvas的简单使用

h5图片拖拽上传

Html

Css

Js

div {
	text-align:center;
	margin-top:50px;
}
.clock {
	background-color:rgba(100,120,60,0.5);
}

function aa(){
	var dom = document.getElementById('clock');
	/*canvas上下文对象*/
	var ctx = dom.getContext('2d');
	var width = ctx.canvas.width;
	var height = ctx.canvas.height;
	var r = width / 2;
	
	function drawBackground(){
		ctx.save();
		ctx.translate(r,r);
		ctx.beginPath();
		ctx.lineWidth = 10;
		ctx.arc(0 , 0 , r - 5 , 0 , 2*Math.PI , false);
		ctx.stroke();
		
		
		var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
		ctx.font = '18px Arial';
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		hourNumbers.forEach(function(number,i){
			/*弧度*/
			var rad = 2 * Math.PI / 12 * i;
			var x = Math.cos(rad) * (r - 30);
			var y = Math.sin(rad) * (r - 30);
			ctx.fillText(number, x, y);
		});
		
		for (var i = 0; i < 60; i++){
			var rad = 2 * Math.PI / 60 * i;
			var x = Math.cos(rad) * (r - 18);
			var y = Math.sin(rad) * (r - 18);
			ctx.beginPath();
			if(i % 5 === 0){
				ctx.fillStyle = '#000';
				ctx.arc(x,y,2,0,2*Math.PI,false);
			}else{
				ctx.fillStyle = '#ccc';
				ctx.arc(x,y,2,0,2*Math.PI,false);
			}
			ctx.fill();
		}
	}
	
	
	function drawHour (hour, minute) {
		ctx.save();
		ctx.beginPath();
		var rad = 2 * Math.PI / 12 * hour;
		var mrad = 2 * Math.PI /12 / 60 * minute;
		ctx.rotate(rad + mrad);
		ctx.lineWidth = 6;
		ctx.lineCap = 'round';
		ctx.moveTo(0, 10);
		ctx.lineTo(0, -r / 2);
		ctx.stroke();
		ctx.restore();
	}
	
	function drawMinute (minute) {
		ctx.save();
		ctx.beginPath();
		var rad = 2 * Math.PI / 60 * minute;
		ctx.rotate(rad);
		ctx.lineWidth = 3;
		ctx.lineCap = 'round';
		ctx.moveTo(0, 10);
		ctx.lineTo(0, -r + 30);
		ctx.stroke();
		ctx.restore();
	}
	
	function drawSecond (second) {
		ctx.save();
		ctx.beginPath();
		ctx.fillStyle = '#c14543';
		var rad = 2 * Math.PI / 60 * second;
		ctx.rotate(rad);
		ctx.moveTo(-2, 20);
		ctx.lineTo(2, 20);
		ctx.lineTo(1, -r + 18);
		ctx.lineTo(-1, -r + 18);
		ctx.fill();
		ctx.restore();
	}
	
	function drawArc(){
		ctx.beginPath();
		ctx.fillStyle = 'fff';
		ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
		ctx.fill();
	}
	
	function draw (){
		ctx.clearRect(0, 0, width, height);
		var now = new Date();
		var hour = now.getHours();
		var minute = now.getMinutes();
		var second = now.getSeconds();
		drawBackground();
		drawHour(hour, minute);
		drawMinute(minute);
		drawSecond(second);
		drawArc();
		ctx.restore();
	}
	
	draw();
	setInterval(draw, 1000);
};
aa();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

H5简易时钟



代码描述：H5时钟代码

初学H5，做的比较粗糙，还请各位大牛不要嫌弃，多多指教

1

最新

发表评论全部评论

暂时没有评论！

??0

2017/4/10 17:00:10

不错，做的挺好的，很接地气回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>H5简易时钟-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号