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


Posted in jQuery onAugust 21, 2017

 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 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
简单实现jQuery轮播效果
Aug 18 #jQuery
简单实现jQuery手风琴效果
Aug 18 #jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
You might like
PHP 多进程 解决难题
2009/06/22 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php读取本地json文件的实例
2018/03/07 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
js单例模式详解实例
2013/11/21 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
VueJS全面解析
2016/11/10 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python中time库的实例使用方法
2019/10/31 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
初中同学聚会感言
2014/02/11 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
小学开学标语
2014/07/01 职场文书
班委竞选稿范文
2015/11/21 职场文书
Python开发五子棋小游戏
2022/04/28 Python