快捷導(dǎo)航

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

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

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

HTML部分

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>炸彈倒計(jì)時(shí)</title> 
  <style type="text/css"> 
    .content { 
      width: 200px; 
      margin:0 auto; 
    } 
    .content .img1 { 
      /*添加炸彈動(dòng)畫 第一值是動(dòng)畫名稱 第二個(gè)值是動(dòng)畫的時(shí)間 第三個(gè)值時(shí)循環(huán)的次數(shù)，infinite為循環(huán)次數(shù)表示無限循環(huán)，用數(shù)值時(shí)則是循環(huán)次數(shù)*/ 
      animation: bounce 1s infinite; 
    } 
    .content .img2 { 
      animation: magnify 1s 1; 
    } 
    .btn { 
      font-size: 30px; 
      margin-left: 650px; 
    } 
    /*讓炸彈跳動(dòng)*/ 
    @keyframes bounce{ 
      from{ 
        transform: scale(0.9); /*scale縮放*/ 
      }to{ 
        transform: scale(1.1); 
      } 
    } 
    /*讓火花圖片從小到大放大*/ 
    @keyframes magnify{ 
      from{ 
        transform: scale(0);/*為0時(shí)不顯示*/ 
      }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="倒計(jì)時(shí)開始了，準(zhǔn)備好了嗎" /> 
  <div class="content"> 
    <!-- 用于顯示倒計(jì)時(shí)秒數(shù) --> 
    <p class="min"></p> 
    <!-- 存放爆炸前圖片 --> 
    <img src="img/2007614223430291.png" class="img1" /> 
    <!-- 顯示倒計(jì)時(shí)結(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è)置一個(gè)值用來表示從多少秒開始倒計(jì)時(shí) 
    var time=3; 
    //setInterval(function(){},1000)方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式,也就是會(huì)根據(jù)你給的時(shí)間執(zhí)行事件 1000是毫秒=1秒 
    var set=setInterval(function(){ 
      //判斷上面的time倒計(jì)時(shí)時(shí)間是否為0 
      if(time>0){ 
        //不為0時(shí)每過一秒就減一秒 
        $(".min").text(time-- +"(s)"); 
        //同時(shí)當(dāng)?shù)褂?jì)時(shí)不為0時(shí)，讓content顯示出來但火花圖片隱藏 
        $(".content").show(); 
        $(".content .img2").hide(); 
      }else{//否則當(dāng)?shù)褂?jì)時(shí)=0時(shí)，倒計(jì)時(shí)結(jié)束，將數(shù)字與炸彈隱藏，顯示火花圖片 .img1,p中 “,”是選擇兩個(gè)同級(jí)標(biāo)簽元素 
        $(".content .img1,p").hide(); 
        $(".content .img2").show(); 
      } 
    }, 1000); 
  }) 
})

總結(jié)

以上所述是小編給大家介紹的jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: