jQuery倒计时（初级）

[程序缘]

倒计时


插件可以让简便的代码实现更多的功能，给程序员带来了极大的便捷，下面是本人利用jQuery的动画效果完成的一个简单的倒计时。

简单的HTML样式：

<!--倒计时-->
<div class="three" id="three">
<h>3</h>
</div>
<div class="two" id="two">
<h>2</h>
</div>
<div class="one" id="one">
<h>1</h>
</div>


简单的css样式：

.three,.two,.one{width: 100%;height: 100%;position:absolute;top: 0;left: 0;}
.three{background: rgba(200,200,200,.3);}
.two{background: rgba(100,100,100,.2);}
.one{background: rgba(0,0,0,.1);}
.three h,.two h,.one h{font-size: 1px;color:blue;font-weight: normal;
position: absolute;top: 4%;left: 40%;}
.three{z-index: 333;position: absolute;}
.two{z-index: 666;position: absolute;}
.one{z-index: 999;position: absolute;}
.four{width: 100%;height: 100%;background:#fff;
position: fixed;top:0;left: 0;}


以下是jQuery代码：

$(function(){
$("#three h").hide();$("#two h").hide();$("#one h").hide();$("#img1").hide();
$("html").mouseover(function(){
$("#three h").show();
$("#three h").animate({
"fontSize":"500px",
},2000,function(){
$("#three").toggle(0,'esea',function(){
$("#two h").show();
$("#two h").animate({
"fontSize":"500px",},2000,function(){
$("#two").toggle(0,'esea',function(){
$("#one h").show();
$("#one h").animate({
"fontSize":"500px",
},2000,function(){
$("#one").toggle(0,'esea',function(){
//内容区
});
})+$("#one").fadeOut(2000,'linear',function(){
$("#one").hide();
$(".one").empty();
$("#img1").slideDown(2000); });});
})+$("#two").fadeOut(2000,'linear',function(){
$("#two").hide();
$(".two").empty();});});
})+$("#three").fadeOut(2000,'linear',function(){
$("#three").hide();
$(".three").empty();
});
});
});



通过鼠标的移入事件，触发倒计时，一个数字结束后通过回调另一个函数来触发另一个数字，因刚开始接触jQuery，所以jQuery代码显得很繁琐，暂时保留，以此警醒自己，日后简化它

[街头小贩]

不错，谢谢楼主的分享

[无限_设计]

确实很复杂，用时间函数会简单吧

[程序缘]

引用 2 楼 无限_设计的回复:

确实很复杂，用时间函数会简单吧

这样子的话，效果挺不错的