FlyHeLanMan的gravatar头像
FlyHeLanMan2015-02-13 17:19:39

jquery开发实现倒计时网页特效源码,有环形效果

菜鸟又来喽,发现一个很不错的倒计时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-datedata-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,当倒计时结束后面板全部显示0true
circle_bg_color字符串环形背景颜色#60686F
use_background布尔值是否显示背景颜色true
fg_width数字环形宽度0.1
bg_width数字进度条的宽度1.2
timejson单独设置每个环形的文字、颜色50
start()函数开始
stop()函数停止
destroy()函数从页面中删除计时器

基本上就这些了,木有什么技术含量,毕竟是人家已经写好的,但是有需要的同学可以直接拿来撒。frown


打赏

文件名: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
最代码最近下载分享源代码列表最近下载
Rebug瑞璿 LV14月12日
星星
bigdick_giles LV12020年12月2日
星星
樊樊樊樊樊樊阵雨 LV162019年12月31日
太阳
tyd888 LV112019年12月18日
月亮月亮星星星星星星
lw19900921 LV252019年5月20日
太阳月亮月亮星星
578291727 LV132018年11月25日
月亮月亮月亮星星
lszloz LV82018年4月12日
月亮月亮
lkduhuan LV192018年2月7日
太阳星星星星星星
hlgwhy LV152017年4月12日
月亮月亮月亮星星星星星星
itxuxiang LV52017年3月8日
月亮星星
最代码最近浏览分享源代码列表最近浏览
yao450 LV111月30日
星星
a32057551711月19日
暂无贡献等级
蓦然回首 LV111月11日
星星
nhyaowei8月4日
暂无贡献等级
暂无贡献等级
b_ruce7月6日
暂无贡献等级
ls2008 LV106月22日
月亮月亮星星星星
wong LV46月9日
月亮
Rebug瑞璿 LV14月12日
星星
hdh3004月1日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友