<html> 里面要链入JQ <script src="js/jquery.min.js"></script>
<!-- 1. 添加一个按钮，用来点击爆炸 -->
<input type="button" class="btn" name="" value="点我！3 2 1 砰！炸了" />
<div class="big">
<!-- 2. p 用于显示倒计时秒数 -->
<p class="seconds"></p>
<!-- 3. 存放爆炸前图片 -->
<img src="img/2.png" class="img1">
<!-- 4. 显示倒计时结束后的爆炸火花图片 -->
<img src="img/1.png" class="img2">
</div>
<css>
* {
margin:0;
padding:0;
}
body {
background: #EDDBDB;
}
/* 1.设置用于显示倒计时秒数的div的宽高 */
.big {
width: 335px;
margin:0 auto;
}
/* 2.把按钮居中 字体调大*/
.btn {
width: 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)
})
})