欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2015年12月14日 08:10:20   作者：Sunshine_lily  
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果，根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能，需要的朋友可以參考下

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

 

一、主體程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>手寫倒計(jì)時(shí)程序</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程序

先來說一下倒計(jì)時(shí)的原理：

1、將時(shí)間轉(zhuǎn)為0:0格式

2、需要開啟一個(gè)定時(shí)器，每隔1000ms就讓時(shí)間自動(dòng)減1

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

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

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

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

相關(guān)文章

最新評論