FlyHeLanMan的gravatar头像
FlyHeLanMan 2015-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,当倒计时结束后面板全部显示0 true
circle_bg_color 字符串 环形背景颜色 #60686F
use_background 布尔值 是否显示背景颜色 true
fg_width 数字 环形宽度 0.1
bg_width 数字 进度条的宽度 1.2
time json 单独设置每个环形的文字、颜色 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
最代码最近下载分享源代码列表最近下载
快乐的程序员  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日
最代码最近浏览分享源代码列表最近浏览
冰糖雪里  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日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友