基于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. Windows 重装系统-用户转移User和Program Files 文件夹

    原文地址:https://blog.csdn.net/sinat_38799924/article/details/74059037 重装系统时为了让系统数据保持可用我们需要做一些备份处理.比如用户数 ...

  2. 基于matplotlib的数据可视化 - 柱状图bar

    柱状图bar 柱状图常用表现形式为: plt.bar(水平坐标数组,高度数组,宽度比例,ec=勾边色,c=填充色,label=图例标签) 注:当高度值为负数时,柱形向下 1 语法 bar(*args, ...

  3. 64位FreeSWITCH编译安装（版本1.4.20）

    1.安装64位的CentOS6.5操作系统(勾选的服务器版本安装). 2.下载FreeSWITCH安装包以及关联的lib库.下载地址http://files.freeswitch.org/downlo ...

  4. IAR仿真时绿色箭头一直指向汇编界面，而C界面没有

    设置如下

  5. （面试题）有关Integer

    今天在一家公司做了个面试题:运行下列代码,输出结果是什么 Integer a=new Integer("12");  Integer b=new Integer("12& ...

  6. C#基础第四天-作业答案-Hashtable-list<KeyValuePair>泛型实现名片

    .Hashtable 实现 Hashtable table = new Hashtable(); while (true) { Console.WriteLine("------------ ...

  7. Markdown语法与入门

    Markdown语法与入门   Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的 ...

  8. SonarQube学习入门指南

    1. 什么是SonarQube? SonarQube 官网:https://www.sonarqube.org/ SonarQube®是一种自动代码审查工具,用于检测代码中的错误,漏洞和代码异味.它可 ...

  9. 压力测试工具ab及centos下单独安装方法 nginx和tomcat静态资源的性能测试

    Apache安装包中自带的压力测试工具Apache Benchmark(简称ab)简单易用,这里采用ab作为压国测试工具. 独立安装: ab运行需要信赖apr-util包: # yum install ...

  10. 正确使用 Volatile 变量

    Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的 synchronized”:与 synchronized 块相比,volatile 变量所需的编码较少,并且运行时开销也较少, ...