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

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

更多精彩内容请看 web 前端中文站
 http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

案例效果：

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

实现源码：

 <!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

【注：本文源自网络文章资源，由站长整理发布】