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鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jquery实现穿梭框功能
Jan 19 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中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
vue的基本用法与常见指令
2017/08/15 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python初步实现word2vec操作
2020/06/09 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
村官学习十八大感想
2014/01/15 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书