jQuery模擬爆炸倒計時功能實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:32:07

jQuery模擬爆炸倒計時功能實例代碼

jQuery模擬爆炸倒計時功能實例代碼: HTML部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>炸彈倒計時</title> <style type=text/css> .content { width

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery模擬爆炸倒計時功能實例代碼: HTML部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>炸彈倒計時</title> <style type=text/css> .content { width

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 { 
 /*添加炸彈動畫 第一值是動畫名稱 第二個值是動畫的時間 第三個值時循環的次數，infinite為循環次數表示無限循環，用數值時則是循環次數*/ 
 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"> 
 <!-- 用于顯示倒計時秒數 --> 
 <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(){ 
 //讓圖片內容先隱藏 
 $(".content").hide(); 
 //添加input點擊事件 
 $(".btn").click(function(){ 
 //設置一個值用來表示從多少秒開始倒計時 
 var time=3; 
 //setInterval(function(){},1000)方法可按照指定的周期（以毫秒計）來調用函數或計算表達式,也就是會根據你給的時間執行事件 1000是毫秒=1秒 
 var set=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模擬爆炸倒計時功能實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com