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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
thinkphp循环结构用法实例
2014/11/24 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php 数据结构之链表队列
2017/10/17 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python实现Linux的find命令实例分享
2017/06/04 Python
Python实现单词翻译功能
2017/06/06 Python
python文本数据相似度的度量
2018/03/12 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python实现微信打飞机游戏
2020/03/24 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
草船借箭教学反思
2014/02/03 职场文书
公司担保书范文
2014/05/21 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
大学生操行评语大全
2014/12/31 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL