jQuery模拟爆炸倒计时功能实例代码_网络技术_宿州市腾雀网络科技有限公司

jQuery模拟爆炸倒计时功能实例代码

发布时间 - 2026-01-11 02:53:08 点击率：次

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模拟爆炸倒计时功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# jquery # 倒计时 # jQuery实现发送验证码并60秒倒计时功能 # jQuery简单倒计时效果完整示例 # 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) # jQuery实现简单倒计时功能的方法 # jQuery短信验证倒计时功能实现方法详解 # 基于jQuery倒计时插件实现团购秒杀效果 # jQuery实现的倒计时效果实例小结 # jquery实现的判断倒计时是否结束代码 # 不为 # 小编 # 在此 # 第二个 # 给大家 # 第三个 # 准备好了 # 所述 # 你给 # 给我留言 # 从小到大 # 感谢大家 # 时则 # 疑问请 # 有任何 # 开始了 # 结束后 # css # text

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Mac如何快速切换输入法？（快捷键设置）

下一篇：QQ 用 Electron 重构后，终实现 Linux、ma

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Mac如何快速切换输入法？（快捷键设置）

下一篇：QQ 用 Electron 重构后，终实现 Linux、ma