基于jQuery个性圆圈倒计时特效里面包含十几款不用效果的jQuery倒计时特效下载。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<section class="header">

    <div style="padding:20px;"><div id="rC"></div></div>

</section>

<div id="rC_A" class="redCountdownDemo"></div>

<div id="rC_B" class="redCountdownDemo"></div>

<div id="rC_F" class="redCountdownDemo"></div>

<div id="rC_D" class="redCountdownDemo"></div>

<div id="rC_C" class="redCountdownDemo"></div>

<div id="rC_E" class="redCountdownDemo"></div>

<div id="rC_PA" class="redCountdownDemo"></div>

            <div id="rC_PB" class="redCountdownDemo"></div>

            <div id="rC_PE" class="redCountdownDemo"></div>

            <div id="rC_PJ" class="redCountdownDemo"></div>

            <div id="rC_PC" class="redCountdownDemo"></div>

            <div id="rC_PD" class="redCountdownDemo"></div>

            <div id="rC_PF" class="redCountdownDemo"></div>

            <div id="rC_PK" class="redCountdownDemo"></div>

            <div id="rC_PG" class="redCountdownDemo"></div>

            <div id="rC_PH" class="redCountdownDemo"></div>

            <div id="rC_PI" class="redCountdownDemo"></div>

            <div id="rC_PL" class="redCountdownDemo"></div>

<script type="text/javascript">

    $('#rC_PA').redCountdown({ preset: "flat-colors", end: $.now() + 10000 });

    $('#rC_PB').redCountdown({ preset: "flat-colors-fat", end: $.now() + 10000 });

    $('#rC_PE').redCountdown({ preset: "flat-colors-very-fat", end: $.now() + 10000 });

    $('#rC_PJ').redCountdown({ preset: "flat-colors-black", end: $.now() + 10000 });

    $('#rC').redCountdown({ preset: "white", end: $.now() + 645600 });

    $('#rC_PC').redCountdown({ preset: "white", end: $.now() + 10000 });

    $('#rC_PD').redCountdown({ preset: "white-fat", end: $.now() + 10000 });

    $('#rC_PF').redCountdown({ preset: "white-very-fat", end: $.now() + 10000 });

    $('#rC_PK').redCountdown({ preset: "white-black", end: $.now() + 10000 });

    $('#rC_PG').redCountdown({ preset: "black", style: { secondsElement: { gauge: { fgColor: "#F00" }}}, end: $.now() + 10000 });

    $('#rC_PH').redCountdown({ preset: "black-fat", labels: false, end: $.now() + 10000 });

    $('#rC_PI').redCountdown({ preset: "black-very-fat", labelsOptions: { lang: { days: 'D', hours: 'H', minutes: 'M', seconds: 'S' }, style: 'font-size:0.5em; text-transform:uppercase;'

        }, end: $.now() + 10000 });

    $('#rC_PL').redCountdown({ preset: "black-black", labelsOptions: { style: 'font-size:0.5em; text-transform:uppercase;' } , end: $.now() + 10000 });

    $('#rC_B').redCountdown({

        end: $.now() + 10000,

        labels: true,

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#1abc9c"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            },

            hoursElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#2980b9"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            },

            minutesElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#8e44ad"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            },

            secondsElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#f39c12"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_A').redCountdown({

        end: '1388468325',

        now: '1378441323',

        labels: true,

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#1abc9c"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            hoursElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#2980b9"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            minutesElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#8e44ad"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            secondsElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#f39c12"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_E').redCountdown({

        end: '1388468325',

        now: '1380501323',

        labels: true,

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#1abc9c",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            hoursElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#2980b9",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            minutesElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#8e44ad",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            secondsElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#f39c12",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_D').redCountdown({

        end: '1397468325',

        now: '1388471324',

        labels: true,

        labelsOptions: {

            lang: {

                days: 'D',

                hours: 'H',

                minutes: 'M',

                seconds: 'S'

            },

            style: 'font-size:0.5em; text-transform:uppercase;'

        },

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            hoursElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            minutesElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            secondsElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_C').redCountdown({

        end: '1390868325',

        now: '1388461323',

        labels: true,

        labelsOptions: {

            lang: {

                days: 'Dni',

                hours: 'Godzin',

                minutes: 'Minut',

                seconds: 'Sekund'

            },

            style: 'font-size:0.5em; text-transform:uppercase;'

        },

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            hoursElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            minutesElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            secondsElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_F').redCountdown({

        end: '1390868325',

        now: '1388461323',

        labels: true,

        labelsOptions: {

            lang: {

                days: 'Dni',

                hours: 'Godzin',

                minutes: 'Minut',

                seconds: 'Sekund'

            },

            style: 'font-size:0.5em; text-transform:uppercase;'

        },

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            hoursElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            minutesElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            secondsElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

</script>

http://www.w2bc.com/Article/38756

基于jQuery个性圆圈倒计时特效的更多相关文章

  1. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  2. 基于jquery结婚电子请柬特效素材

    分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  4. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  5. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. 基于jQuery HTML5人物介绍卡片特效

    基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  9. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

随机推荐

  1. C#调用XmlSerializer序列化时生成CDATA节点解决方法

    public class Person{    public string Name { get; set; }    public int Age { get; set; }        } 引用 ...

  2. 【Servlet】Java Serlvet Filter 过滤器

    Filter的设计思想Filter是一种AOP(aspect-oriented programming)的设计思想 : 面向切面编程.用于的请求和响应都会走 使用filter的登录案例我们通过一张图片 ...

  3. 【MySQL】MySQL支持的数据类型

    1.整型 MySQL数据类型 含义(有符号) tinyint(m) 1个字节 范围(-128~127) smallint(m) 2个字节 范围(-32768~32767) mediumint(m) 3 ...

  4. TextView中显示链接 定义颜色

    <TextView android:id="@+id/textView" android:layout_width="match_parent" andr ...

  5. MYSQL-使用mysqldump创建数据库快照

    对已经有数据的mysql库创建主从的时候,可以使用mysqldump创建数据库快照 #--master-data选项会自动加上开启复制需要的"change master to"语句 ...

  6. Bootstrap表单构造器

    http://www.bootcss.com/p/bootstrap-form-builder/

  7. Ubuntu18.04 修改DNS

    Ubuntu18.04 修改DNS sudo vim /etc/systemd/resolved.conf 修改如下: [Resolve] DNS=119.29.29.29 保存退出后 systemc ...

  8. MySql计算两个日期的时间差函数

    MySql计算两个日期时间的差函数: 第一种:TIMESTAMPDIFF函数,需要传入三个参数,第一个是比较的类型,可以比较FRAC_SECOND.SECOND. MINUTE. HOUR. DAY. ...

  9. grub配置指南

    GRUB(统一引导装入器)是基本的Linux引导装入器.其有四个作用,如下:1.选择操作系统(如果计算机上安装了多个操作系统).2.表示相应引导文件所在的分区.3.找到内核.4.运行初始内存盘,设置内 ...

  10. IOS开发之UIScrollVIew运用

    UIScrollView可以实现在一个界面看到所有内容,同时也不需要担心所显示的内容超出屏幕的大小,当超出之后可以翻阅至下一页浏览. #pragma mark - UIScrollViewDelega ...