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

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

赞 (0)

相关推荐

  • jQuery实现简单倒计时功能的方法

    jQuery实现简单倒计时功能的方法

    本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

  • jQuery实现的倒计时效果实例小结

    本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    本文实例讲述了jQuery简单倒计时效果.分享给大家供大家参考,具体如下: 前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件.今天抽空整理出来,分享给大家. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒计时效果</titl

  • 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

  • jQuery实现发送验证码并60秒倒计时功能

    本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

  • jquery实现的判断倒计时是否结束代码

    本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa

  • jQuery短信验证倒计时功能实现方法详解

    本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > &l

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

     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 { /*添加炸弹动

  • jQuery图片轮播功能实例代码

    jquery 轮播图代码如下所示: <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片轮播</title> <style> *{margin:0px;padding:0px;} .one{ float:left; position:relative; lef

  • PHP ajax+jQuery 实现批量删除功能实例代码小结

    PHP ajax+jQuery 实现批量删除功能实例代码小结

    目录结构 piliangshan.php <?php require_once './db_conn.php'; $sql = "select * from user"; $result = mysqli_query($conn, $sql); ?> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>全选演示</tit

  • jQuery Validate格式验证功能实例代码（包括重名验证）

    引入jQuery-1.7.1.js和jquery.validate.js两个js文件 jquery.validate.js下载地址:http://xiazai.jb51.net/201703/yuanma/jquery.validate.rar <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ

  • 微信小程序倒计时功能实例代码

    微信小程序倒计时功能实例代码

    本实例的主要功能是:单击按钮弹出一个半透明的弹出层,在规定的时间后才能激活关闭按钮,关闭弹出层. wxml部分 <view class="wrap"> <view class="btns"> <button formType="submit" class="btn" hover-class='btn_on' bindtap='show'>使用说明</button> <but

  • jQuery实现下拉加载功能实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = ''; if(page=="") page=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll( function(event){ //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 10 >= $(docum

  • jQuery中Chosen三级联动功能实例代码

    Chosen 是一个JavaScript插件,它能让丑陋的.很长的select选择框变的更好看.更方便,不仅如此,它更扩大了,增长了主动筛选的功能. 本文介绍Chosen联动,具体代码如下: var addressResolve = function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; //默认参数 var defaluts = { proId: 'divProv', cityId: 'divCity'

  • jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码

    心血来潮想为自己的小项目做一个提醒系统,譬如私信,评论等消息都能及时传递过来.由于道行尚浅,网上那些长轮询对于我略微复杂,于是觉得还是自己写一写试试比较好. 我的思路是,单独在数据库中建一个提醒表,表主要由接收者的id和消息类型两个字段组成 /* 前台提醒表 */ CREATE TABLE IF NOT EXISTS notification( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, -- 主键自增 mid INT NOT NULL DEFAULT

  • Android模拟强制下线通知功能实例代码

    Android模拟强制下线通知功能实例代码

    package com.itheima74.broadcastbestpractice; import android.content.Intent; import android.os.Bundle; import android.os.SystemClock; import android.support.v4.content.LocalBroadcastManager; import android.view.View; /** * 模拟强制下线通知 * 1.登录成功后10秒发送一条本地自

  • jQuery实现下拉框功能实例代码

    jQuery实现下拉框功能实例代码

    说一百句,不如我给大家贴张效果图,效果图请看下面: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { m

随机推荐