快捷導(dǎo)航

jQuery模擬爆炸倒計時功能實(shí)例代碼

更新時間：2017年08月21日 09:40:40 作者：loy坨坨

本文通過代碼給大家介紹了jQuery模擬爆炸倒計時功能實(shí)例代碼，非常不錯，代碼簡單易懂，需要的朋友參考下吧

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點(diǎn)擊事件 
  $(".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模擬爆炸倒計時功能實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: