Fork me on GitHub

jquery特效（8）—倒计时

最近公司在做一个答题的小游戏，每道题可以有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程序估计比较容易吧~~~希望对小伙伴有帮助，有什么疑问可以留言给我。

 

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

 

posted @ 2015-12-13 19:17  半亩花田  阅读(608)  评论(0)  编辑  收藏  举报