接着上一篇《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
【注:本文源自网络文章资源,由站长整理发布】