基于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. 指尖下的js ——多触式web前端开发之二：处理简单手势(转)

    这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理.     水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手 ...

  2. block（六）循环引用-b

    在ARC与非ARC环境下对block使用不当都会引起循环引用问题,一般表现为,某个类将block作为自己的属性变量,然后该类在block的方法体里面又使用了该类本身,简单说就是self.theBloc ...

  3. class-dump在osx 10.11以后安装方法

      当Mac升级了OSX 10.11后,配置class-dump的时候,会发现逆向书上推荐的class-dump存放目录/usr/bin,class-dump存放不进去,尝试过用sudo 还是不被允许 ...

  4. MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线？ Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    MVC+Spring.NET+NHibernate .NET SSH框架整合   在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...

  5. CStatic的透明背景方法

    原文链接: http://blog.sina.com.cn/s/blog_4a470fcc01000406.html 这篇文章中有些许错误,不过思路值得借鉴   如果在一个有颜色的窗体中创建一个CSt ...

  6. 简单示例：Spring4 整合 单个Redis服务

    1. 引入spring-data-redis.jar API:https://docs.spring.io/spring-data/redis/docs/current/api/org/springf ...

  7. App开发准备

    一. Android开发 二. IOS开发 1. 准备苹果电脑 Mac pro 一般比较贵,很少人或公司使用 替代的产品为 iMac 或 Mac mini 中配8G内存版 2. 准备苹果开发者账户,才 ...

  8. “TableDetails”中列“IsPrimaryKey”的值为DBNull. Mysql EntityFramework

                                                                                Entity Framework连接MySQL时 ...

  9. MySQL 5.6学习笔记（查询数据、插入、更新、删除数据）

    1. 查询语法 SELECT {*|<字段列表>} [FROM table_references [WHERE where_condition] [GROUP BY {col_name | ...

  10. android笔记---主界面(二)自定义actionbar环境的配置

    第一步,添加java文件 第二步,添加actionbar的item文件 是个选择器,点中状态和选中状态 <?xml version="1.0" encoding=" ...