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中汉字显示乱码问题(已解决)
Dec 27 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
基于mysql的论坛(3)
2006/10/09 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php中stream(流)的用法
2014/03/25 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
Javascript Object 对象学习笔记
2014/12/17 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Python内置函数delattr的具体用法
2017/11/23 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
党支部承诺书范文
2014/03/28 职场文书
倡议书范文
2014/04/16 职场文书
2015年底工作总结范文
2015/05/15 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL