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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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中使用XML
2006/10/09 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
javascript 三种编解码方式
2010/02/01 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
深入理解Python中的内置常量
2017/05/20 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
火车的故事教学反思
2014/02/11 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
企业安全生产责任书
2014/04/14 职场文书
师范生自荐信模板
2014/05/28 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫