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
最代码最近下载分享源代码列表最近下载
Rebug瑞璿  LV4 2021年4月12日
bigdick_giles  LV1 2020年12月2日
樊樊樊樊樊樊阵雨  LV17 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日
itxuxiang  LV5 2017年3月8日
最代码最近浏览分享源代码列表最近浏览
150252812  LV5 10月1日
17608417105  LV8 9月24日
tangjun  LV17 8月30日
cciccc  LV2 8月23日
Viridity  LV6 6月1日
xuexue186  LV6 5月23日
liu3046  LV1 5月18日
Rso521  LV2 4月1日
吃坚果的松鼠  LV1 1月19日
liuahm0813  LV4 2021年12月28日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友