爆炸倒计时代码

<html> 里面要链入JQ <script src="js/jquery.min.js"></script>

<input type="button" class="btn" name="" value="点我！3 2 1 砰！炸了" />

<p class="seconds"></p>

<img src="img/2.png" alt="" class="img1">

<img src="img/1.png" alt="" class="img2">
</div>

<css>

* {
margin:0;
padding:0;
}
body {
background: #EDDBDB;
}
/* 1.设置用于显示倒计时秒数的div的宽高 */
.big {
335px;
margin:0 auto;

}
/* 2.把按钮居中字体调大*/
.btn {
300px;
height: 50px;
background-image: linear-gradient(to right,#71CFF2,#92E4EC,#D0EDF7);
border-radius: 50px;
box-shadow: 0px 2px 0 0 #aaa;
font-size: 25px;
margin: 20px 495px;
}
/* 3.定义动画让炸弹跳动*/
@keyframes bomb {
from {
transform:scale(0.9);
}
to {
transform:scale(1.1);
}
}
/* 让火花图片扩大缩小 */
@keyframes spark {
from {
transform:scale(0.9);
}
to {
transform:scale(1.1);
}
}
/* 4.声明动画 */
.big .img1 {
animation: bomb 1s infinite;
}
.big .img2 {
animation: spark 1s 1;
}

<js>

// 1.定义一个文档就绪函数
$(function(){
// 2.把大的div的图片内容先隐藏
$(".big").hide();

// 3.添加input点击事件
$(".btn").click(function(){
// 4.设置一个值用来表示从多少秒开始倒计时
var time = 3;

//setInterval(function(){},1000)方法:
//可按照指定的周期（以毫秒计）来调用函数或计算表达式,也就是会根据你给的时间执行事件
//1000是毫秒=1秒
var nice = setInterval(function(){
// 5.//判断上面的time倒计时时间是否为0
if(time>0){

//不为0时每过一秒就减一秒
$(".seconds").text("倒数"+time--+"s"); //time-- 秒数从3s开始
// $(".seconds").text(--time+"(s)"); // --time 秒数从2s开始

//同时当倒计时不为0时，让content显示出来
$(".big").show();
$(".big .img2").hide(); // 但火花图片隐藏

}else {
//否则当倒计时=0时，倒计时结束，将数字与炸弹隐藏，显示火花图片
//.img1,p中 “,”是选择两个同级标签元素
$(".big .seconds,.img1").hide();
$(".big .img2").show();
}
},500)
})
})

爆炸倒计时 代码

爆炸倒计时代码