<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery个性圆圈倒计时特效 </title>
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.knob.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
<script src="js/jquery.redcountdown.js"></script>
<style>
pre { max-width:100%; height:200px; overflow:scroll; border:1px solid #666; margin:0; }
body { font-family:'Open Sans'; font-weight:300; padding:0; margin:0;}
.redCountdownDemo { margin:0 auto 30px auto; max-width:800px; width:calc(100%;); padding:30px; display:block; }
section > .wrapper { max-width:800px; margin:0 auto; }
section.header { background:#e74c3c; color:#FFF; margin-bottom:30px; }
section.header > .wrapper { padding:30px 0 30px; }
pre { margin-bottom:30px; }
pre.small { height:40px; overflow-y:hidden; }
h1 { font-size:42px; font-weight:300; margin:0; }
h2 { font-size:30px; font-weight:300; margin:0; }
#rC { }
#rC_A { background:#FFF; border:1px solid #e74c3c; }
#rC_F { background:rgb(52, 73, 94); border:1px solid rgb(52, 73, 94); }
#rC_B { background:#222; border:1px solid #000; }
#rC_PC { background:#222; border:1px solid #222; }
#rC_PD { background:#222; border:1px solid #222; }
#rC_PF { background:#222; border:1px solid #222; }
#rC_PK { background:#222; border:1px solid #222; }
#rC_E { background:#FFF; border:1px solid #e74c3c; }
#rC_C { background:url('demo3.jpg') center center; background-size:cover; border:1px solid rgba(0,0,0,0); }
#rC_D { background:#3498db; border:1px solid rgba(0,0,0,0); }
b { font-weight:600!important; }
.options b { display:block; border-bottom:1px solid #666; margin-top:8px; }
</style>
</head>
<body>
<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:
jQuery实现的个性圆圈倒计时特效源码.zip
版权申诉
171 浏览量
2022-11-07
00:24:14
上传
评论
收藏 212KB ZIP 举报
jQuery实现的个性圆圈倒计时特效源码.zip （7个子文件） 
132689966598683124 
demo3.jpg 172KB
index.html 12KB js 
jquery.knob.min.js 11KB jquery.redcountdown.js 16KB jquery.ba-throttle-debounce.min.js 1KB excanvas.js 12KB jquery-1.11.0.min.js 94KB资源评论
