基於jQuery個性圓圈倒計時特效

時間  2019-11-13
標籤 基於 jquery 個性 圓圈 倒計時 特效 欄目 JQuery 简体版
原文   原文鏈接

基於jQuery個性圓圈倒計時特效裏面包含十幾款不用效果的jQuery倒計時特效下載。效果圖以下：javascript

在線預覽    源碼下載html

實現的代碼。java

html代碼：jquery

<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/38756spa

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程