jQuery倒计时插件FlipTimer特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery倒计时插件FlipTimer特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery倒计时插件FlipTimer</title>
        <link href="css/style2.css"  rel="stylesheet" type="text/css">
        <script type="text/javascript" src="js/jquery.1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery.easing.js"></script>
        <script type="text/javascript" src="js/fliptimer.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Atomic+Age' rel='stylesheet' type='text/css'>
    </head>

    <body>

        <!-- Flip Timer Version 2 Start -->
        <div class="ft_bg">

            <!-- Flip Timer Content Wrapper Start -->
            <div class="ft_wrapper">

                <!-- Flip Timer Head Start -->
                <div class="ft_header">

                    <!-- Your Logo Here Start -->
                    <div class="ft_logo">
                        <img src="img/ec_logo.png">
                    </div><!--/fp_logo-->
                    <!-- Your Logo Here End -->

                    <!-- Coming Soon Text Start -->
                    <p>This website is under construction!</p>
                    <!-- Coming Soon Text End -->

                    <!-- Social Networks Start -->
                    <div class="ft_social">

                        <a href="#" class="ft_twitter"></a>
                        <a href="#" class="ft_facebook"></a>
                        <a href="#" class="ft_google"></a>

                    </div><!--/ft_social-->
                    <!-- Social Networks End -->

                </div><!--/fp_header -->
                <!-- Flip Timer Head End -->

                <!-- Flip Timer Counter Start -->
                <div class="ft_counter">

                    
                    <script type="text/javascript">
                      $(".ft_counter").EightycloudsFliptimer({
                         enddate    : "24 December 2043 12:00:00 GMT",
                         callback   : function(){
                             alert("Countdown is Complete!");
                         }
                      });
                    </script>
                    
                </div><!--/ft_counter -->
                <!-- Flip Timer Counter End -->

            </div><!--/ft_wrapper -->            
            <!-- Flip Timer Content Wrapper End -->

        </div><!--/ft_bg -->
        <!-- Flip Timer version 2 End -->
    </body>
</html>

JS代码(fliptimer.js):

eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(a($){
	$.1f.1e=a(P){
	C 4={
	5:O,P:P,11:M,c:{
	z:M,q:M,A:M,g:M,e:M,h:M,f:M}
}
;
	O.13=a(){
	d.17();
	d.j.c()}
;
	C d={
	R:4.P.R,S:a(12){
	C b;
	b=\'<9 k="6 \'+12+\'">\';
	b+=\'<9 k="1g">\';
	b+=\'<9 k="1h">\';
	b+=\'<9 k="J">0</9>\';
	b+=\'</9>\';
	b+=\'<9 k="14"></9>\';
	b+=\'<9 k="1d">\';
	b+=\'<9 k="V">0</9>\';
	b+=\'</9>\';
	b+=\'<9 k="15 8"></9>\';
	b+=\'<9 k="18"></9>\';
	b+=\'<9 k="16"></9>\';
	b+=\'<9 k="19"></9>\';
	b+=\'<9 k="n 8"></9>\';
	b+=\'<9 k="m 8"></9>\';
	b+=\'</9>\';
	b+=\'<9 k="1j">\';
	b+=\'<9 k="1i">\';
	b+=\'<9 k="G">0</9>\';
	b+=\'</9>\';
	b+=\'<9 k="14"></9>\';
	b+=\'<9 k="1k">\';
	b+=\'<9 k="U">0</9>\';
	b+=\'</9>\';
	b+=\'<9 k="15"></9>\';
	b+=\'<9 k="18"></9>\';
	b+=\'<9 k="16"></9>\';
	b+=\'<9 k="19"></9>\';
	b+=\'<9 k="n l"></9>\';
	b+=\'<9 k="m l"></9>\';
	b+=\'</9>\';
	b+=\'<9 k="1o">\';
	b+=12;
	b+=\'</9>\';
	b+=\'</9>\';
	W b}
,17:a(){
	C b;
	b=\'<9 k="1q">\';
	b+=O.S("g");
	b+=O.S("e");
	b+=O.S("h");
	b+=O.S("f");
	b+=\'</9>\';
	$(b).1r(4.5)}
,j:{
	I:"1s",H:"1l",o:a(){
	W 1p}
,g:a(){
	C g=("0"+4.c.g).X(-2);
	C o=d.j.o();
	E($(4.5).7(".6.g .G").p()!==g[1]){
	$(4.5).7(".6.g .n.l").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.g .n.l").t();
	$(4.5).7(".6.g .G").p(g[1])}
,u:a(){
	$(4.5).7(".6.g .n.l").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.g .m.l").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.g .m.l").t()}
,u:a(){
	$(4.5).7(".6.g .m.l").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.g .U").p(g[1])}
}
)}
}
)}
E($(4.5).7(".6.g .J").p()!==g[0]){
	$(4.5).7(".6.g .n.8").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.g .n.8").t();
	$(4.5).7(".6.g .J").p(g[0])}
,u:a(){
	$(4.5).7(".6.g .n.8").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.g .m.8").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.g .m.8").t()}
,u:a(){
	$(4.5).7(".6.g .m.8").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.g .V").p(g[0])}
}
)}
}
)}
}
,e:a(){
	C e=("0"+4.c.e).X(-2);
	C o=d.j.o();
	E($(4.5).7(".6.e .G").p()!==e[1]){
	$(4.5).7(".6.e .n.l").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.e .n.l").t();
	$(4.5).7(".6.e .G").p(e[1])}
,u:a(){
	$(4.5).7(".6.e .n.l").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.e .m.l").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.e .m.l").t()}
,u:a(){
	$(4.5).7(".6.e .m.l").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.e .U").p(e[1])}
}
)}
}
)}
E($(4.5).7(".6.e .J").p()!==e[0]){
	$(4.5).7(".6.e .n.8").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.e .n.8").t();
	$(4.5).7(".6.e .J").p(e[0])}
,u:a(){
	$(4.5).7(".6.e .n.8").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.e .m.8").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.e .m.8").t()}
,u:a(){
	$(4.5).7(".6.e .m.8").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.e .V").p(e[0])}
}
)}
}
)}
}
,h:a(){
	C h=("0"+4.c.h).X(-2);
	C o=d.j.o();
	E($(4.5).7(".6.h .G").p()!==h[1]){
	$(4.5).7(".6.h .n.l").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.h .n.l").t();
	$(4.5).7(".6.h .G").p(h[1])}
,u:a(){
	$(4.5).7(".6.h .n.l").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.h .m.l").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.h .m.l").t()}
,u:a(){
	$(4.5).7(".6.h .m.l").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.h .U").p(h[1])}
}
)}
}
)}
E($(4.5).7(".6.h .J").p()!==h[0]){
	$(4.5).7(".6.h .n.8").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.h .n.8").t();
	$(4.5).7(".6.h .J").p(h[0])}
,u:a(){
	$(4.5).7(".6.h .n.8").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.h .m.8").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.h .m.8").t()}
,u:a(){
	$(4.5).7(".6.h .m.8").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.h .V").p(h[0])}
}
)}
}
)}
}
,f:a(){
	C f=("0"+4.c.f).X(-2);
	C o=d.j.o();
	E($(4.5).7(".6.f .G").p()!==f[1]){
	$(4.5).7(".6.f .n.l").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.f .n.l").t();
	$(4.5).7(".6.f .G").p(f[1])}
,u:a(){
	$(4.5).7(".6.f .n.l").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.f .m.l").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.f .m.l").t()}
,u:a(){
	$(4.5).7(".6.f .m.l").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.f .U").p(f[1])}
}
)}
}
)}
E($(4.5).7(".6.f .J").p()!==f[0]){
	$(4.5).7(".6.f .n.8").w({
	y:N,i:0,8:10}
,{
	x:d.j.I,r:o/2,q:a(){
	$(4.5).7(".6.f .n.8").t();
	$(4.5).7(".6.f .J").p(f[0])}
,u:a(){
	$(4.5).7(".6.f .n.8").s({
	y:3,i:F,8:3}
).v();
	$(4.5).7(".6.f .m.8").w({
	i:K,8:3}
,{
	x:d.j.H,r:o/2,q:a(){
	$(4.5).7(".6.f .m.8").t()}
,u:a(){
	$(4.5).7(".6.f .m.8").s({
	i:0,8:10}
).v();
	$(4.5).7(".6.f .V").p(f[0])}
}
)}
}
)}
}
,c:a(){
	4.c.z=B.D(Y Z())/T;
	4.c.A=B.D(Y Z(4.P.1b))/T;
	E(4.c.z>=4.c.A){
	1c(4.11);
	E(1a d.R==="a"){
	d.R()}
W}
4.c.g=B.D((4.c.A-4.c.z)/L);
	4.c.e=B.D((4.c.A-4.c.z)%L/Q);
	4.c.h=B.D((4.c.A-4.c.z)%L%Q/F);
	4.c.f=B.D((4.c.A-4.c.z)%L%Q%F);
	d.j.g();
	d.j.e();
	d.j.h();
	d.j.f();
	4.11=1m(a(){
	4.c.z=B.D(Y Z())/T;
	4.c.A=B.D(Y Z(4.P.1b))/T;
	E(4.c.z>=4.c.A){
	1c(4.11);
	E(1a d.R==="a"){
	d.R()}
W}
4.c.g=B.D((4.c.A-4.c.z)/L);
	4.c.e=B.D((4.c.A-4.c.z)%L/Q);
	4.c.h=B.D((4.c.A-4.c.z)%L%Q/F);
	4.c.f=B.D((4.c.A-4.c.z)%L%Q%F);
	d.j.g();
	d.j.e();
	d.j.h();
	d.j.f()}
,T)}
}
}
;
	O.13()}
}
)(1n);
	',62,91,'||||glob|element|block|find|left|div|function|html|time|timer|hours|seconds|days|minutes|height|set|class|right|block_effect6|block_effect5|delay|text|start|duration|css|show|complete|hide|animate|easing|top|now|end|Math|var|floor|if|60|block_right_top_count|easing2|easing1|block_left_top_count|55|86400|null|64|this|params|3600|callback|addBlock|1000|block_right_bottom_count|block_left_bottom_count|return|slice|new|Date||interval|klass|init|block_middle_separator|block_effect1|block_effect3|build|block_effect2|block_effect4|typeof|enddate|clearInterval|block_left_bottom|EightycloudsFliptimer|fn|block_left|block_left_top|block_right_top|block_right|block_right_bottom|easeOutExpo|setInterval|jQuery|block_text|200|EightycloudsFlipTimer|appendTo|easeInExpo'.split('|')))

CSS代码(style2.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* CSS Resets End */
/* General */
.ft_bg{position:absolute;width:100%;height:100%;background-color:#2f3032;background-image:url(../img/bg_1.png);background-repeat:repeat;}
.ft_wrapper{max-width:1000px;margin:0 auto;}
/* Header */
.ft_header{width:100%;}
.ft_header p{font-family:Arial,Helvetica,sans-serif;font-size:30px;color:#fff;text-align:center;line-height:40px;margin-top:15px;margin-bottom:50px;text-shadow:1px 1px 0px #000;}
.ft_logo{width:100%;margin-top:130px;text-align:center;}
.ft_social{max-width:130px;margin:0 auto;}
.ft_twitter{float:left;width:33px;height:30px;background-image:url(../img/twitter_icon.png);}
.ft_twitter:hover{background-position:33px;}
.ft_facebook{float:left;width:25px;height:30px;background-image:url(../img/facebook_icon.png);margin-left:20px;}
.ft_facebook:hover{background-position:25px;}
.ft_google{float:left;width:24px;height:30px;background-image:url(../img/google_icon.png);margin-left:20px;}
.ft_google:hover{background-position:24px;}
/* Counter */
.ft_counter{width:100%;height:190px;margin-top:110px;float:left;}
.EightycloudsFlipTimer{height:190px;width:800px;margin:0 auto;}
.EightycloudsFlipTimer .block:first-child{margin-left:0px;}
.EightycloudsFlipTimer .block{float:left;height:190px;width:170px;margin-left:40px;}
.EightycloudsFlipTimer .block_left{height:130px;width:80px;float:left;position:relative;}
.EightycloudsFlipTimer .block_left_top{height:65px;width:76px;position:absolute;top:0;left:2px;z-index:0;background:#e7e7e7;overflow:hidden;box-shadow:0px 1px 4px 1px rgba(0,0,0,0.3);}
.EightycloudsFlipTimer .block_middle_separator{height:25px;width:80px;position:absolute;top:45px;left:0;background-image:url("../img/middle_separator.png");z-index:1;}
.EightycloudsFlipTimer .block_left_bottom{height:65px;width:76px;position:absolute;top:65px;left:2px;z-index:0;background:#FFF;overflow:hidden;box-shadow:0px 1px 4px 1px rgba(0,0,0,0.3);}
.EightycloudsFlipTimer .block_left_top_count{font-family:'Atomic Age',cursive;font-size:90px;line-height:90px;color:#474747;text-align:center;margin-top:15px;}
.EightycloudsFlipTimer .block_left_bottom_count{font-family:'Atomic Age',cursive;font-size:90px;line-height:90px;color:#474747;text-align:center;margin-top:-50px;margin-left:2px;}
.EightycloudsFlipTimer .block_right{height:130px;width:80px;float:left;margin-left:10px;position:relative;}
.EightycloudsFlipTimer .block_right_top{height:65px;width:76px;position:absolute;top:0;left:2px;z-index:0;background:#e7e7e7;overflow:hidden;box-shadow:0px 1px 4px 1px rgba(0,0,0,0.3);}
.EightycloudsFlipTimer .block_middle_separator{height:25px;width:80px;position:absolute;top:45px;left:0;background-image:url("../img/middle_separator.png");z-index:1;}
.EightycloudsFlipTimer .block_right_bottom{height:65px;width:76px;position:absolute;top:65px;left:2px;z-index:0;background:#FFF;overflow:hidden;box-shadow:0px 1px 4px 1px rgba(0,0,0,0.3);}
.EightycloudsFlipTimer .block_right_top_count{font-family:'Atomic Age',cursive;font-size:90px;line-height:90px;color:#474747;text-align:center;margin-top:15px;}
.EightycloudsFlipTimer .block_right_bottom_count{font-family:'Atomic Age',cursive;font-size:90px;line-height:90px;color:#474747;text-align:center;margin-top:-50px;margin-left:2px;}
.EightycloudsFlipTimer .block_text{height:60px;line-height:60px;text-align:center;width:170px;color:#FFF;font-family:Arial,Helvetica,sans-serif;font-size:12px;}
.EightycloudsFlipTimer .block_effect1{height:1px;width:76px;position:absolute;top:1px;left:2px;z-index:0;background:#FFF;}
.EightycloudsFlipTimer .block_effect2{height:1px;width:76px;position:absolute;top:2px;left:2px;z-index:0;background:#d5d5d5;}
.EightycloudsFlipTimer .block_effect3{height:5px;width:76px;position:absolute;bottom:5px;left:2px;z-index:0;background:#d6d6d6;}
.EightycloudsFlipTimer .block_effect4{height:5px;width:76px;position:absolute;bottom:0px;left:2px;z-index:0;background:#ccc;}
.EightycloudsFlipTimer .block_effect5{height:60px;width:76px;position:absolute;top:3px;left:3px;z-index:0;background:#e7e7e7;border-top:1px solid #ccc;border-left:1px solid #ccc;opacity:0.9;display:none;}
.EightycloudsFlipTimer .block_effect6{height:0px;width:76px;position:absolute;top:64px;left:10px;z-index:0;background:#fff;border-bottom:1px solid #ccc;border-left:1px solid #ccc;opacity:0.9;display:none;}
/* Seconds Specifics */
/* Numbers */
.EightycloudsFlipTimer .block.seconds .block_left_top_count{color:#fff;}
.EightycloudsFlipTimer .block.seconds .block_left_bottom_count{color:#fff;}
.EightycloudsFlipTimer .block.seconds .block_right_top_count{color:#fff;}
.EightycloudsFlipTimer .block.seconds .block_right_bottom_count{color:#fff;}
/* Backgrounds */
.EightycloudsFlipTimer .block.seconds .block_right_top{background:#c60000;}
.EightycloudsFlipTimer .block.seconds .block_right_bottom{background:#ff2626;}
.EightycloudsFlipTimer .block.seconds .block_left_top{background:#c60000;border-top:1px solid #ff2626;}
.EightycloudsFlipTimer .block.seconds .block_left_bottom{background:#ff2626;}
/* Middle Separator */
.EightycloudsFlipTimer .block.seconds .block_middle_separator{background-image:url("../img/middle_separator.png");}
/* Effects */
.EightycloudsFlipTimer .block.seconds .block_effect1{background:#db1111;}
.EightycloudsFlipTimer .block.seconds .block_effect2{background:#ae0000;}
.EightycloudsFlipTimer .block.seconds .block_effect3{background:#ae0000;border-bottom:1px solid #880000;}
.EightycloudsFlipTimer .block.seconds .block_effect4{background:#980000;border-bottom:1px solid #810000;}
.EightycloudsFlipTimer .block.seconds .block_effect5{background:#db1111;border-top:1px solid #880000;border-left:1px solid #880000;}
.EightycloudsFlipTimer .block.seconds .block_effect6{background:#db1111;border-bottom:1px solid #880000;border-left:1px solid #880000;}

附件:下载该文件资源,减少时间成本(增值服务)