jquery實現(xiàn)倒計時效果

更新時間：2015年12月14日 08:10:20 作者：Sunshine_lily

這篇文章主要介紹了jquery實現(xiàn)倒計時效果，根據(jù)設計一個游戲引出的倒計時功能，需要的朋友可以參考下

設計一個答題的小游戲，每道題可以有20秒時間作答，超過時間就要給出相應的提醒，由于20秒時間太長，不適合做GIF動態(tài)圖，下面來看一下我寫的5秒倒計時的測試程序結(jié)果：

一、主體程序

<!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、將時間轉(zhuǎn)為0:0格式

2、需要開啟一個定時器，每隔1000ms就讓時間自動減1

3、判斷時間是否為0，如果為0則代表計時結(jié)束，此時需要給出提示或者做其他事情

下面來看具體實現(xiàn)的倒計時程序：

$(function(){
  var countDownTime=parseInt(5);    //在這里設置每道題的答題時長
  function countDown(countDownTime){
    var timer=setInterval(function(){
      if(countDownTime>=0){
        showTime(countDownTime);
        countDownTime--;
      }else{
        clearInterval(timer);
        alert("計時結(jié)束,給出提示");
      }
    },1000);
  }
  countDown(countDownTime);
  function showTime(countDownTime){      //這段是計算分和秒的具體數(shù)
    var minute=Math.floor(countDownTime/60);
    var second=countDownTime-minute*60;
    $("#countDownTime").text(minute+":"+second);
  }
})

帶著我寫的原理再去看這段JS程序估計比較容易吧，希望對小伙伴有幫助。

您可能感興趣的文章: