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 相关文章推荐
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
微信小程序实现评论功能
Nov 28 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 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判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP导入导出Excel代码
2015/07/07 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
js表数据排序 sort table data
2009/02/18 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
让python在hadoop上跑起来
2016/01/27 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python @property装饰器原理解析
2020/01/22 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Pygame框架实现飞机大战
2020/08/07 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
采购经理岗位职责
2014/02/16 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
质量管理标语
2014/06/12 职场文书
个人思想政治总结
2015/03/05 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书