jQuery倒计时(初级)

程序缘 2019-01-16 08:50:45
倒计时


插件可以让简便的代码实现更多的功能,给程序员带来了极大的便捷,下面是本人利用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代码显得很繁琐,暂时保留,以此警醒自己,日后简化它
...全文
203 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
程序缘 2019-01-25
  • 打赏
  • 举报
回复
引用 2 楼 无限_设计的回复:
确实很复杂,用时间函数会简单吧
这样子的话,效果挺不错的
无限_设计 2019-01-22
  • 打赏
  • 举报
回复
确实很复杂,用时间函数会简单吧
街头小贩 2019-01-16
  • 打赏
  • 举报
回复
不错,谢谢楼主的分享

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧