接着上一篇《HTML5+Canvas 实现一款圆形时钟动画特效》我们再来实现一个不一样的圆盘时钟，它有刻度，而且在下方还有 3 个小圆盘显示时分秒三个时间的准确数组。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
案例效果：
实现源码：
<!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>web 前端中文站 www.lisa33xiaoq.net</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(); //web 前端中文站 www.lisa33xiaoq.net
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/1Esos7E8V5RYDn4G-0oh9Cw ? 密码：tav9
【注：本文源自网络文章资源，由站长整理发布】
