Comment créer un compte à rebours avec jQuery?

Je vais avoir plus d'une de ces petites boîtes sur mon site, et chacun commence un compte à rebours à des moments différents.

Comment peut-on diminuer la valeur numérique de la minuterie par seconde, en donnant la simulation d'un compte à rebours?

<p class="countdown">15</p>

À l'aide de ce javascript correctement countsdown, mais chaque auctionbox est affecté. Comment voulez-vous me suggère d'isoler la minuterie d'agir sur un seul élément?

<script>
var sec = 15
var timer = setInterval(function() {
   $('.auctiondiv .countdown').text(sec--);
   if (sec == -1) {
      $('.auctiondiv .countdown').fadeOut('slow');
      clearInterval(timer);
   }
}, 1000);
</script>

Comment créer un compte à rebours avec jQuery?

La raison pour laquelle il les affecte tous est parce que vous êtes à travailler sur la CLASSE, pas l'ID. Créer un ID unique pour votre élément.
Aha! Qu'il a été. 🙂 Maintenant, l'autre question serait de quelle pièce d'identité à affecter à chaque "auctionbox". Aurais-je générer un en fonction de leur nom de produit? Comment serait - vous un vétéran de webdev, de lui attribuer un ID? Quel algorithme de utiliseriez-vous?
Btw, peut-être que vous aimeriez jeter un oeil à cette magnifique compte à rebours plugin; keith-wood.name/countdown.html
Je n'ai aucune idée de ce que votre backend ressemble ou du langage que vous utilisez pour voiture donc je n'ai aucune idée: -)), Il peut être quelque chose que vous aimez!

OriginalL'auteur Only Bolivian Here | 2011-08-29

11

Essayez les solutions suivantes qui va délivrer correctement le compte à rebours pour les valeurs sélectionnées.
```
$(document).ready(function() {

  //Function to update counters on all elements with class counter
  var doUpdate = function() {
    $('.countdown').each(function() {
      var count = parseInt($(this).html());
      if (count !== 0) {
        $(this).html(count - 1);
      }
    });
  };

  //Schedule the update to happen once every second
  setInterval(doUpdate, 1000);
});
```
JSFiddle Exemple
- http://jsfiddle.net/n24BP/
Note: Ceci lancera le compte à rebours de la séquence sur chaque élément qui a le countdown classe. Si vous souhaitez la rendre plus restrictive à un seul élément, vous aurez besoin de modifier le sélecteur de .countdown à quelque chose de plus restrictives. Le plus simple est d'ajouter un id de référence et l'élément directement.
```
<p id='theTarget'>15</p>
```
Le JavaScript est un peu plus complexe ici parce que vous aurez besoin de la minuterie pour finalement fermer car il n'y a pas beaucoup de chance, ou de l'utilisation, de l'élément avec un id double ajoutée
```
$(document).ready(function() {

  var timer = setInterval(function() {

    var count = parseInt($('#theTarget').html());
    if (count !== 0) {
      $('#theTarget').html(count - 1);
    } else {
      clearInterval(timer);
    }
  }, 1000);
});
```
JSFiddle Exemple
- http://jsfiddle.net/bSe9E/
long de la journée. Fixe
Vous êtes une belle personne.
Je suis juste endormie. Il est quatre heures du matin où je suis. @JaradPar -- comme le risque de plus ennuyeux Père Tapia, c'est toujours mauvais. L'affichage n'est plus mis à jour (une énorme amélioration), mais la minuterie continue à fonctionner ad infinitum.
ma réponse est écrit en supposant que d'autres éléments du DOM avec la classe compte à rebours peut être ajouté à tout moment. Le compteur de courir éternellement est voulu par la conception pour gérer ce cas
c'est une bonne explication ou un savant de renvoi. Si vous pouvez me dire qui est votre intention, je vais upvote.

OriginalL'auteur JaredPar
4

HTML:
```
<p id="countdown">15</p>
```
JS:
```
var count = document.getElementById('countdown');
timeoutfn = function(){
       count.innerHTML = parseInt(count.innerHTML) - 1;
       setTimeout(timeoutfn, 1000);
};
setTimeout(timeoutfn, 1000);
```
Violon: http://jsfiddle.net/wwvEn/

comme l'écrit, qui va de 15 à 14, puis s'arrête.
La bonne réponse. Cependant, ce qui se passe une fois que la valeur est en dessous de zéro? (clin d'oeil). Aussi, doit être setInterval() pas setTimeout
merde un sec...
je l'ai corrigé
j'ai corrigé, ça devrait fonctionner maintenant 🙂

OriginalL'auteur Neal
1

Vous n'avez pas besoin de jQuery pour cela (bien qu'il contribuera à la création du texte).

setInterval est ce que vous voulez.
```
$.each(
    $('.countdown'), function(el) { 
         setInterval( function() { 
             $(this).text($(this).text()*1 - 1);
         }, 1000); 
    }
);
```
cela ne s'arrête jamais. Il va de zéro, -1, -2...
quand a l'OP dire qu'ils voulaient arrêter le compte à rebours?
Wow, pourquoi la haine? J'avais cru comprendre qu'il n'est DONC pas du code machine, mais un aide - et c'est ce que j'ai fait. J'ai donné de l'OP une base pour travailler. Et comme @Neal a dit, il n'a jamais été techniquement, en précisant qu'il doit s'arrêter.
c'est un peu le but d'un compte à rebours. Fritz Lang, qui a inventé le compte à rebours pour son 1929 film Femme Dans La Lune, a expliqué que si vous comptiez , le public ne sait pas quand la fusée de lancement; avec un nombre le, tout le monde sait quand vous arrivez à zéro, boom.
Bien que je comprenne que vous pensez qu'il devrait s'arrêter à zéro (et je suis d'accord), je ne pense pas que l'écriture pleine, complète, et d'erreur de l'épreuve de code pour toute personne qui en fait la demande est correcte. Aussi, je soupçonne les gens utilisaient les comptes à rebours d'un peu avant de 1929 🙂

OriginalL'auteur josh.trow

CountdownTimer est un inverse de compte à rebours de plugin jQuery pour l'affichage du compte à rebours selon les besoins avec ses différentes options de configuration.

Un minimum d'horloge de compte à rebours jQuery plugin qui vous permet de compter jusqu'à une date cible de temps avec le soutien de la coutume, le Fuseau horaire UTC offset.

Comment créer un compte à rebours avec jQuery?

Comment l'utiliser:

bibliothèque jQuery et jQuery horloge de compte à rebours de plugin dans votre page web.

<script type="text/javascript">
function SetTimer()
{
if(document.SetDefaultTimer != true){ 
SetDefaultTimeOut(); 
} 
}
function SetDefaultTimeOut()
{
//document.SetDefaultTimer = true;
setTimeout(function () {
StartTimeOut();             
$("#videos-container4").css("display", "block");
}, $("#HdnSetDefaultTime").val());
}
function SetTimerByContinue()
{
document.SetDefaultTimer = true;
setTimeout(function () {
StartTimeOut();             
$("#videos-container4").css("display", "block");
}, $("#HdnSMDIdleNotificationRepeatTime").val());
//}, 600000);
}
function ResetTimer()
{
$("#videos-container4").css("display", "none");
clearInterval(cleanTimeOutInterval);
//SetDefaultTimeOut();
SetTimerByContinue();
}
$('#ClickContinue').click(function () {
ResetTimer();
});
var cleanTimeOutInterval;
function StartTimeOut() {
debugger
var timer2 = $("#HdnTimerCountDownStart").val() + ":00";
$('.countdown').html($("#HdnTimerCountDownStart").val() + "mins" + ":00" + "secs");
cleanTimeOutInterval = setInterval(function () {
var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
if (minutes < 0) clearInterval(interval);
seconds = (seconds < 0) ? 59 : seconds;
seconds = (seconds < 10) ? '0' + seconds : seconds;
//minutes = (minutes < 10) ?  minutes : minutes;
//$('.countdown').html(minutes + ':' + seconds);
if(minutes == "0"){
$('.countdown').html(seconds + 'secs');
} else {
$('.countdown').html(minutes + 'mins ' + seconds + 'secs');
}
timer2 = minutes + ':' + seconds;
if (timer2 == "0:00") {
//Your action below
}
}, 1000);
}
</script>

Créer le code Html pour un compte à rebours de l'horloge à l'aide de liste non ordonnée.

<div id="videos-container4" class="container-fluid main-timer">
<a href="javascript:void(0);" id="btnAnchor" onclick="SetTimer()" runat="server">Timer</a>
<input type="hidden" id="HdnSetDefaultTime" value="0" />
<input type="hidden" id="HdnSMDIdleNotificationRepeatTime" value="0" />
<input type="hidden" id="HdnTimerCountDownStart" value="0" />
<span>Your Time will be end in </span>
<br />
<span style="color: red;">
<span class="countdown"></span>
</span>
<!-- <span>minutes</span> -->
<div style="margin-top: 10px;">
<a id="ClickContinue" class="btn-continue">Continue</a>
</div>
</div>

Ajouter le code CSS suivant des extraits de style de l'horloge de compte à rebours.

<style type="text/css">
.main-timer {
margin: 10px 15px;
display: none;
float: right;
border: 1px solid #fd0000;
border-radius: 15px;
padding-top: 8px;
height: 100px;
width: 17%;
text-align: center;
background: #fff;
box-shadow: 0 4px 16px -4px #888;
position: relative;
}
.btn-continue {
cursor: pointer;
border: 1px solid #ff0707;
padding: 4px;
margin-right: 6px;
color: green;
text-decoration: none;
}
.btn-continue:hover {
border: 2px solid #ff0707;
color: green;
text-decoration: none;
}
</style>

OriginalL'auteur Fezal halai

0
```
var countDown = function() {
var ct = 15;
var $elem = $(this);
var display = function() {
$elem.text(ct--);
}
var iv = setInterval(function() {
display();
if (ct === 0) {
clearInterval(iv);
}
}, 1000);
display();
};
$("#countdown").each(countDown);
```
Pourquoi êtes-vous à l'aide de each pour effectuer une itération sur un sélecteur d'id (ne doit renvoyer qu'1 élément)? Me semble bizarre, surtout depuis l'OP spécifié un style à la question? Aussi, vous êtes à la re-remplissage de l'élément HTML de 15 au lieu de l'aide de la valeur de la mettre dans le HTML.
Bonne question, à laquelle j'ai seulement boiteux réponses. Comme je l'ai été à l'origine de l'écriture, j'ai regardé Neal réponse, qui a eu l'ID. Il n'était pas (et n'est pas clair pour moi ce que la coopérative doit. Un compte à rebours de 15? Un compte à rebours à partir de la valeur de courant de quoi que ce soit?
L'OP est ambiguë sur un couple de ces éléments. Ils ont à la fois de définir explicitement l'élément HTML à 15, puis de le remettre à 15 de leur auto (un peu bizarre). Principalement, j'ai été distrait par la each sur le sélecteur d'id. Je ne crois pas que a aucune valeur fonctionnelle, mais pas assez bon avec js pour le dire (les expériences de dire non). Note: je ne suis pas le downvoter.
Sur chaque: vous avez à faire quelque chose. Tous les éléments jQuery sont constitués de "un certain nombre" d'éléments DOM. Même si vous le programmeur sait qu'un "certain nombre" est à 1, le code ne fonctionne pas. $.each est aussi bon une façon comme une autre pour l'obtenir. "Valeur fonctionnelle", c'est exactement ce que t, dans la "programmation fonctionnelle" sens "fonctionnelle".
Fonctionnel je voulais avait-il une différence fonctionnelle entre l'utilisation de each et simplement l'appel de la méthode sur $('#countdown') directement. Je ne crois pas que ce sera toujours produire un diff, mais peut certainement être convaincu

OriginalL'auteur Malvolio
0

Essayer dans votre inspecteur de prendre l'idée de la façon dont un compte à rebours devrait fonctionner:
```
var count = 15; setInterval("if(count>0)console.log(count--)", 1000)
```
Et voici le code complet de votre dossier(pas de jquery)
```
var counter = document.getElementsByClassName('countdown')[0],
count = parseInt(counter);
setInterval("if(count>0)counter.innerHTML(count--)", 1000)
```
Maintenant, je sais que cela peut fonctionner, mais pourquoi faire? Vous êtes forcer la machine à utiliser eval lorsque vous pouvez simplement envoyer un propre, fonction anonyme prêt à s'exécuter.
Vous avez raison...

OriginalL'auteur Mohsen

Vous devez vous connecter pour publier un commentaire.