HTML5+Canvas实现有刻度的圆盘时钟

HTML5 herman 773浏览 0评论

接着上一篇《HTML5+Canvas实现一款圆形时钟动画特效》我们再来实现一个不一样的圆盘时钟,它有刻度,而且在下方还有3个小圆盘显示时分秒三个时间的准确数组。

废话不多说,我们还是老规矩,献上案例效果:

HTML5 Canvas 3种不同风格的圆盘时钟

主要的实现源码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>业余草:www.xttblog.com</title>
<link rel="stylesheet" href="css/demo.css"/>
</head>
<body>
<div class="wrapper clearfix show">
	<div class="clock" id="clock"></div>
	<div class="clock" id="clock1"></div>
	<div class="clock" id="clock2"></div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/clock-1.1.0.min.js"></script>
<script>
	var clock = $("#clock").clock(),
		data = clock.data('clock');
	// data.pause(); 业余草:www.xttblog.com
	// data.start();
	// data.setTime(new Date());
	var d = new Date();
	d.setHours(9);
	d.setMinutes(51);
	d.setSeconds(20);
	var clock1 = $("#clock1").clock({
		width: 210,
		height: 305,
		theme: 't2',
		date: d
	});
	var clock2 = $("#clock2").clock({
		width: 150,
		height: 220,
		theme: 't3'
	});
</script>
</body>
</html>

另外的两个js文件和一个css文件,我就不贴了,需要的可以到我的百度网盘上下载,链接:https://pan.baidu.com/s/1jIvO2Aa 密码:piui

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763,QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5+Canvas实现有刻度的圆盘时钟