jQuery模拟爆炸倒计时功能实例代码

2023-09-26 03:24:05 59

炸弹倒计时 .content{ width:200px; margin:0auto; } .content.img1{ /*添加炸弹动画第一值是动画名称第二个值是动画的时间第三个值时循环的次数，infinite为循环次数表示无限循环，用数值时则是循环次数*/ animation:bounce1sinfinite; } .content.img2{ animation:magnify1s1; } .btn{ font-size:30px; margin-left:650px; } /*让炸弹跳动*/ @keyframesbounce{ from{ transform:scale(0.9);/*scale缩放*/ }to{ transform:scale(1.1); } } /*让火花图片从小到大放大*/ @keyframesmagnify{ from{ transform:scale(0);/*为0时不显示*/ }to{ transform:scale(1); } }

$(function(){ //让图片内容先隐藏 $(".content").hide(); //添加input点击事件 $(".btn").click(function(){ //设置一个值用来表示从多少秒开始倒计时 vartime=3; //setInterval(function(){},1000)方法可按照指定的周期（以毫秒计）来调用函数或计算表达式,也就是会根据你给的时间执行事件1000是毫秒=1秒 varset=setInterval(function(){ //判断上面的time倒计时时间是否为0 if(time>0){ //不为0时每过一秒就减一秒 $(".min").text(time--+"(s)"); //同时当倒计时不为0时，让content显示出来但火花图片隐藏 $(".content").show(); $(".content.img2").hide(); }else{//否则当倒计时=0时，倒计时结束，将数字与炸弹隐藏，显示火花图片.img1,p中“,”是选择两个同级标签元素 $(".content.img1,p").hide(); $(".content.img2").show(); } },1000); }) })

jQuery模拟爆炸倒计时功能实例代码

热门推荐

随机推荐