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="倒計時開始了，準(zhǔn)備好了嗎" /> <div class="content"> <!-- 用于顯示倒計時秒數(shù) --> <p class="min"></p> <!-- 存放爆炸前圖片 --> <img src="img/2007614223430291.png" class="img1" /> <!-- 顯示倒計時結(jié)束后的爆炸火花 --> <img src="img/9d74c66b4d77c5aa5f61649a1383a31c9d9362b7a13f-wKrhDv_fw658.jpg" class="img2" /> </div> </body> </html> js代碼片段
$(function(){ //讓圖片內(nèi)容先隱藏 $(".content").hide(); //添加input點擊事件 $(".btn").click(function(){ //設(shè)置一個值用來表示從多少秒開始倒計時 var time=3; //setInterval(function(){},1000)方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式,也就是會根據(jù)你給的時間執(zhí)行事件 1000是毫秒=1秒 var set=setInterval(function(){ //判斷上面的time倒計時時間是否為0 if(time>0){ //不為0時每過一秒就減一秒 $(".min").text(time-- +"(s)"); //同時當(dāng)?shù)褂嫊r不為0時，讓content顯示出來但火花圖片隱藏 $(".content").show(); $(".content .img2").hide(); }else{//否則當(dāng)?shù)褂嫊r=0時，倒計時結(jié)束，將數(shù)字與炸彈隱藏，顯示火花圖片 .img1,p中 “,”是選擇兩個同級標(biāo)簽元素 $(".content .img1,p").hide(); $(".content .img2").show(); } }, 1000); }) }) 總結(jié)
以上所述是小編給大家介紹的jQuery模擬爆炸倒計時功能實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
