FlyHeLanMan
2015-02-13 17:19:39
jquery开发实现倒计时网页特效源码,有环形效果
菜鸟又来喽,发现一个很不错的倒计时jquery插件,有环形特效,先上图:
已经测试木有问题,代码是开源的,下面是地址:http://www.dowebok.com/62.html
没币的同学可以去官网下载,土豪同学可以直接下载附件撒。同时我也贴一下官网给出的说明:
TimeCircles 是一个 jQuery 时间类插件,它能够制作出一个漂亮环的形时间,可用于计时或倒计时。虽然 TimeCircles 默认的样式已经很漂亮了,但它还提供了各种参数来自定义,你可以很方便的设置包括环形的大小、进度条的大小、环形的颜色、进度条的颜色、多少刷新以及控制暂停和开始。
兼容性
TimeCircles 的环形面板是 HTML5 canvars,所以它不兼容 IE6 – IE8。
使用方法
1、引入文件
<link rel="stylesheet" href="css/TimeCircles.css"> <script src="js/jquery.min.js"></script> <script src="js/TimeCircles.js"></script>
2、HTML
<div></div> <div data-date="2014-01-01 00:00:00"></div> <div data-timer="900"></div>
可选 data-date 和 data-timer 两个属性,data-date 的值是具体的莫一天多少小时多少分钟多少秒,如2014-01-01 00:00:00,他的作用是计算现在与这个时间过了多久或还有多久;data-timer 的值是一个整数,如900,它的作用是一个秒表,单位是秒。如果这两个属性都缺省,那么它会在页面一开始的时候从0秒开始计时。
3、JavaScript
$(function(){ $(.someTimer').TimeCircles(); });
参数
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
start | 布尔值 | 是否自动开始 | true |
refresh_interval | 数字 | 多少时间刷新面板 | 0.1 |
count_past_zero | 字符串 | 截止后是否归0,当倒计时结束后面板全部显示0 | true |
circle_bg_color | 字符串 | 环形背景颜色 | #60686F |
use_background | 布尔值 | 是否显示背景颜色 | true |
fg_width | 数字 | 环形宽度 | 0.1 |
bg_width | 数字 | 进度条的宽度 | 1.2 |
time | json | 单独设置每个环形的文字、颜色 | 50 |
start() | 函数 | 开始 | 无 |
stop() | 函数 | 停止 | 无 |
destroy() | 函数 | 从页面中删除计时器 | 无 |
基本上就这些了,木有什么技术含量,毕竟是人家已经写好的,但是有需要的同学可以直接拿来撒。
猜你喜欢
请下载代码后再发表评论
文件名:timecircle.zip,文件大小:39.472K
下载
- /
- /62
- /62/css
- /62/css/TimeCircles.css
- /62/index.html
- /62/index_2.html
- /62/js
- /62/js/TimeCircles.js
- /62/js/jquery-1.7.2.min.js
- /62/说明下载.url
- /62/css
- /62
相关代码
最近下载
快乐的程序员 LV25
2023年1月24日
Rebug瑞璿 LV4
2021年4月12日
bigdick_giles LV1
2020年12月2日
樊樊樊樊樊樊阵雨 LV18
2019年12月31日
tyd888 LV11
2019年12月18日
lw19900921 LV25
2019年5月20日
578291727 LV15
2018年11月25日
lszloz LV8
2018年4月12日
lkduhuan LV19
2018年2月7日
hlgwhy LV15
2017年4月12日
最近浏览
Dramaaaa LV3
2023年10月27日
18276177062 LV1
2023年6月12日
osbxjick LV1
2023年5月4日
ycmyyt LV2
2023年4月30日
快乐的程序员 LV25
2023年1月24日
150252812 LV5
2022年10月1日
17608417105 LV9
2022年9月24日
tangjun LV17
2022年8月30日
cciccc LV2
2022年8月23日
Viridity LV6
2022年6月1日