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 相关文章推荐
JS复制到剪贴板示例代码
Oct 30 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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自动跳转中英文页面
2008/07/29 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php导出生成word的方法
2015/12/25 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python流程控制常用工具详解
2020/02/24 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
.NET程序员的几道面试题
2012/06/01 面试题
Shell编程面试题
2016/05/29 面试题
表决心的诗句大全
2014/03/11 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js