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

一、主体程序：

<!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程序估计比较容易吧~~~希望对小伙伴有帮助，有什么疑问可以留言给我。

唉，最近心情比较低落，到处都是感伤的事情，不想长大，不想面对，我只想静静地写个程序。。。。。。

jquery特效（8）—倒计时的更多相关文章

  1. 基于jQuery个性圆圈倒计时特效

    基于jQuery个性圆圈倒计时特效里面包含十几款不用效果的jQuery倒计时特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class=" ...

  2. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  3. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

  4. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  5. 图片左右间隔滚动Jquery特效

    图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...

  6. Web设计师值得收藏的10个jQuery特效

    jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...

  7. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  8. jQuery 特效：盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  9. JQuery特效分享网站

    各种jquery特效分享,可以去上面找资源. http://www.jqshare.com/

  10. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

随机推荐

  1. java反射原理运用

    1.首先用Java反射机制的要做到的一个目的:我们都知道通过得到一个对象中的指定方法或者属性等,基于这个原理我们来做一个 通用的功能,让客户端可以通过传入的对象和一个标识去调用这个对象里自己想要的方法 ...

  2. BZOJ 3065 带插入区间第K小值

    题目描述 Description 从前有n只跳蚤排成一行做早操,每只跳蚤都有自己的一个弹跳力a[i].跳蚤国王看着这些跳蚤国欣欣向荣的情景,感到非常高兴.这时跳蚤国王决定理性愉悦一下,查询区间k小值. ...

  3. javascript --- 多重继承

    多重继承就是指,一个子对象中有不止一个父对象的继承模式. 想要实现她,还是非常简单的,而我们只需要延续属性拷贝的继承思路依次扩展对象即可,而对参数中所继承的对象没有限制. function multi ...

  4. 低成本安全硬件（二）：RFID on PN532

    引言 鉴于硬件安全对于大多数新人是较少接触的,而这方面又非常吸引我,但是部分专业安全研究设备较高的价格使人望而却步.在该系列中,笔者希望对此感兴趣的读者在花费较少金钱的情况下体会到硬件安全的魅力所在. ...

  5. Go语言阅读小笔记,来自知呼达达关于unsafe.Pointer的分享.

    第一式 - 获得Slice和String的内存数据 func stringPointer(s string) unsafe.Pointer { p := (*reflect.StringHeader) ...

  6. 关于Oracle中sysoper这个系统权限的问题

    我们都知道Oracle数据库安装完之后.默认的会有这样几个系统角色或权限.nomal,sysdba,sysoper等等,之前每次登录Oracle的时候.都是直接以conn / as sysdba 的身 ...

  7. STM32串行通信USART解说笔记

    STM32串行通信USART程序例举链接:http://blog.csdn.net/dragon12345666/article/details/24883111 1.STM32串行通信USART的相 ...

  8. vue2.0 + vux 项目搭建

    1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...

  9. Objective C block背后的黑魔法

    前言 block在Objective C开发中应用非常广泛,我们知道block会捕获外部对象,也知道使用block要防止循环引用. "知其然而不知其所以然"是一件非常痛苦的事情,那 ...

  10. android-BroadcastReceive广播接收器

    应用可以使用它对外部事件进行过滤,只对感兴趣的外部事件(如当电话呼入时,或者数据网络可用时)进行接收并做出响应.广播接收器没有用户界面.然而,它们可以启动一个activity或service来响应它们 ...