溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“jQuery如何模擬爆炸倒計時功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jQuery如何模擬爆炸倒計時功能”這篇文章吧。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>炸彈倒計時</title>
<style type="text/css">
.content {
width: 200px;
margin:0 auto;
}
.content .img1 {
/*添加炸彈動畫 第一值是動畫名稱 第二個值是動畫的時間 第三個值時循環(huán)的次數(shù)，infinite為循環(huán)次數(shù)表示無限循環(huán)，用數(shù)值時則是循環(huán)次數(shù)*/
animation: bounce 1s infinite;
}
.content .img2 {
animation: magnify 1s 1;
}
.btn {
font-size: 30px;
margin-left: 650px;
}
/*讓炸彈跳動*/
@keyframes bounce{
from{
transform: scale(0.9); /*scale縮放*/
}to{
transform: scale(1.1);
}
}
/*讓火花圖片從小到大放大*/
@keyframes magnify{
from{
transform: scale(0);/*為0時不顯示*/
}to{
transform: scale(1);
}
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<input type="button" class="btn" value="倒計時開始了，準備好了嗎" />
<div class="content">
<!-- 用于顯示倒計時秒數(shù) -->
<p class="min"></p>
<!-- 存放爆炸前圖片 -->
<img src="img/2007614223430291.png" class="img1" />
<!-- 顯示倒計時結束后的爆炸火花 -->
<img src="img/9d74c66b4d77c5aa5f61649a1383a31c9d9362b7a13f-wKrhDv_fw658.jpg" class="img2" />
</div>
</body>
</html>js代碼片段
$(function(){
//讓圖片內(nèi)容先隱藏
$(".content").hide();
//添加input點擊事件
$(".btn").click(function(){
//設置一個值用來表示從多少秒開始倒計時
var time=3;
//setInterval(function(){},1000)方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式,也就是會根據(jù)你給的時間執(zhí)行事件 1000是毫秒=1秒
var set=setInterval(function(){
//判斷上面的time倒計時時間是否為0
if(time>0){
//不為0時每過一秒就減一秒
$(".min").text(time-- +"(s)");
//同時當?shù)褂嫊r不為0時，讓content顯示出來但火花圖片隱藏
$(".content").show();
$(".content .img2").hide();
}else{//否則當?shù)褂嫊r=0時，倒計時結束，將數(shù)字與炸彈隱藏，顯示火花圖片 .img1,p中 “,”是選擇兩個同級標簽元素
$(".content .img1,p").hide();
$(".content .img2").show();
}
}, 1000);
})
})以上是“jQuery如何模擬爆炸倒計時功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
