recherche

Maison  >  Article  >  interface Web  >  jquery implémente le compte à rebours effect_jquery

jquery implémente le compte à rebours effect_jquery

WBOY
WBOYoriginal
2016-05-16 15:25:451587parcourir

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>

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;
}

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

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JS JSP pour implémenter des statistiques statiques sur le nombre de visites de pages grâce aux compétences call_javascript de la balise imgArticle suivant：Méthode JS JSP pour implémenter des statistiques statiques sur le nombre de visites de pages grâce aux compétences call_javascript de la balise img

Articles Liés

Voir plus