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

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

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

設(shè)計一個答題的小游戲，每道題可以有20秒時間作答，超過時間就要給出相應(yīng)的提醒，由于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é)束，此時需要給出提示或者做其他事情

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

$(function(){
  var countDownTime=parseInt(5);    //在這里設(shè)置每道題的答題時長
  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程序估計比較容易吧，希望對小伙伴有幫助。

您可能感興趣的文章:

相關(guān)文章

jquery 選項卡效果新手代碼
對jquery只是才涉足，如有不適合，請各位多多指教。
2011-07-07
基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼
這篇文章主要介紹了基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼的相關(guān)資料,非常不錯，需要的朋友可以參考下
2016-08-08
jQuery 連續(xù)列表實(shí)現(xiàn)代碼
你有沒有手工的編寫過一些重復(fù)的代碼？你也覺得它們是如此的無聊吧。好了，這里有更好的解決辦法。
2009-12-12
Jquery 過濾器(first,last,not,even,odd)的使用
Jquery 過濾器，顧名思義就是過濾一些不需要的元素，主要有first,last,not,even,odd等等，下面有個使用示例，大家可以感受下
2014-01-01
JQuery獲取當(dāng)前屏幕的高度寬度的實(shí)現(xiàn)代碼
JQuery獲取瀏覽器窗口寬高，文檔寬高的代碼，使用jquery的朋友可以參考下。
2011-07-07
基于jQuery實(shí)現(xiàn)簡單人工智能聊天室
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)簡單人工智能聊天室的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗證界面（附源碼）
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗證界面，并分享了源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-10-10
淺談被jQuery拋棄的函數(shù)及替代函數(shù)
這篇文章主要介紹了被jQuery拋棄的幾個函數(shù)及其替代函數(shù)，我們在做項目開發(fā)的時候一定要注意，分享給大家參考下。
2015-05-05
詳談jQuery中的this和$(this)
在使用jquery操作js時，經(jīng)常弄不明白this與$(this)。最近不是很忙，抽空仔細(xì)研究了一下，記錄下來以供在忘記的時候拉出來參考參考！
2014-11-11
js判斷復(fù)選框是否選中的方法示例【基于jQuery】
這篇文章主要介紹了js判斷復(fù)選框是否選中的方法,結(jié)合實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的復(fù)選框選中判斷相關(guān)操作技巧,需要的朋友可以參考下
2019-10-10