jquery实现倒计时效果


Posted in Javascript onDecember 14, 2015

设计一个答题的小游戏,每道题可以有20秒时间作答,超过时间就要给出相应的提醒,由于20秒时间太长,不适合做GIF动态图,下面来看一下我写的5秒倒计时的测试程序结果:

 jquery实现倒计时效果

一、主体程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>手写倒计时程序</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
  </head>
  <body>
    <section class="countDown">
      <span id="countDownTime"></span>
      <section class="clear"></section>
    </section>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

二、CSS样式

*{
  margin: 0;
  padding:0;
}
html{
  font-size: 12px;
}
.countDown{
  width: 3.8rem;
  text-align: center;
  margin: 2rem auto 0 auto;
}
.countDown #countDownTime{
  font-size: 2rem;
}

 三、Jquery程序

先来说一下倒计时的原理:

1、将时间转为0:0格式

2、需要开启一个定时器,每隔1000ms就让时间自动减1

3、判断时间是否为0,如果为0则代表计时结束,此时需要给出提示或者做其他事情

下面来看具体实现的倒计时程序:

$(function(){
  var countDownTime=parseInt(5);    //在这里设置每道题的答题时长
  function countDown(countDownTime){
    var timer=setInterval(function(){
      if(countDownTime>=0){
        showTime(countDownTime);
        countDownTime--;
      }else{
        clearInterval(timer);
        alert("计时结束,给出提示");
      }
    },1000);
  }
  countDown(countDownTime);
  function showTime(countDownTime){      //这段是计算分和秒的具体数
    var minute=Math.floor(countDownTime/60);
    var second=countDownTime-minute*60;
    $("#countDownTime").text(minute+":"+second);
  }
})

带着我写的原理再去看这段JS程序估计比较容易吧,希望对小伙伴有帮助。

Javascript 相关文章推荐
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
js 窗口抖动示例
Sep 04 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
JavaScript 七大技巧(一)
Dec 13 #Javascript
JavaScript 七大技巧(二)
Dec 13 #Javascript
js自定义回调函数
Dec 13 #Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 #Javascript
分享Javascript实用方法二
Dec 13 #Javascript
JavaScript判断按钮被点击的方法
Dec 13 #Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
JavaScript实现切换多张图片
2021/01/27 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
党校培训思想汇报
2013/12/30 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
体育教师个人总结
2015/02/09 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP