• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 2年前 (2017-12-31) 1494次浏览 未收录 0个评论

接着上一篇《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

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5+Canvas 实现有刻度的圆盘时钟
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址