jquery implémente le compte à rebours effect

jquery implémente le compte à rebours effect_jquery

WBOY

Libérer： 2016-05-16 15:25:45

original

1586 Les gens l'ont consulté

Concevez un petit jeu de réponse à des questions. Chaque question peut recevoir une réponse en 20 secondes. Si le temps est dépassé, un rappel correspondant sera émis. Puisque 20 secondes sont trop longues, elles ne conviennent pas à la création d'animations GIF. jetez un oeil à ce que j'ai écrit. Les résultats du programme de test du compte à rebours de 5 secondes :

1. Programme principal

<!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>

Copier après la connexion

2. Style 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;
}

Copier après la connexion

3. Programme Jquery

Parlons d’abord du principe du compte à rebours :

1. Convertissez l'heure au format 0:0

2. Vous devez démarrer une minuterie pour réduire automatiquement le temps de 1 toutes les 1000 ms

3. Déterminez si le temps est 0. S'il est 0, cela signifie que le minuteur est terminé. À ce moment-là, vous devez donner une invite ou faire autre chose

Regardons la mise en œuvre spécifique du programme de compte à rebours :

$(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);
  }
})

Copier après la connexion

Il sera probablement plus facile de regarder ce programme JS avec les principes que j'ai écrits. J'espère qu'il sera utile à mes amis.