基于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. 【MyBatis】MyBatis之别名typeAliases标签的使用

    <configuration> <typeAliases> <typeAlias alias="Dept" type="cn.xdl.ent ...

  2. 阿里云Redis公网连接的解决办法

    https://help.aliyun.com/document_detail/43850.html ECS Windows 篇 目前云数据库 Redis 需要通过 ECS 的内网进行连接访问,如果您 ...

  3. Eclipse安装PlantUML插件

    新技术的诞生和更新,新工具的发现和使用是两件让人开心的事情. 还记得Visio下苦苦的画流程图的时光吗,现在一切都变得so easy,因为有PlantUML! 官网:http://plantuml.c ...

  4. 实战Apache+Tomcat集群和负载均衡

    实战Apache+Tomcat集群和负载均衡 目录 1.    什么是J2EE集群... 3 1.1.     序言... 3 1.2.     基本术语... 3 伸缩性(Scalability): ...

  5. wpf 添加滚动条 ScrollViewer

    在WPF中有些控件没有滚动条,微软提供了控件ScrollViewer,这个控件是设置滚动条 <ScrollViewer Name="scrollViewer1" /> ...

  6. 权限管理系统（五）：RBAC新解，基于资源的权限管理

    本文讨论以角色概念进行的权限管理策略及主要以基于角色的机制进行权限管理是远远不够的.同时我将讨论一种我认为更好的权限管理方式. 1.什么是角色 当说到程序的权限管理时,人们往往想到角色这一概念.角色是 ...

  7. OpenUDID 实现UDID替代

    http://www.cnblogs.com/zhulin/archive/2012/03/26/2417860.html 补充:还有两个比较通用的开源解决方案: OpenUDID:https://g ...

  8. [转]：Android 5.0的调度作业JobScheduler

    参考:http://blog.csdn.net/cuiran/article/details/42805057 增加 JobScheduler 的同时,去掉了几个广播, CONNECTIVITY_AC ...

  9. Atitti 过程导向 vs 结果导向 attlax的策

    Atitti 过程导向 vs 结果导向 attilax的策略 1. 结果导向的问题 以结果为导向”的明显弊端2 1.1. 白猫黑猫的策略是错误的2 1.2. 为了目的不择手段,完全违背了程序正义原则2 ...

  10. 【Unity】11.6 恒定力 (Constant Force)

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 恒定力 (Constant Force) 是用于向刚体 (Rigidbody) 添加恒定力的快速实用工具,适用于类似火箭 ...