Wie erstellen Sie einen countdown-timer mit jQuery?

Werde ich mehr als einen von diesen kleinen Kästen auf meiner Seite, und jeder wird die Zählung nach unten zu verschiedenen Zeiten.

Wie kann ich das verringern der numerische Wert des timer pro Sekunde, wodurch die simulation von ein countdown-timer?

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

Mit diesem javascript ist es richtig countsdown, aber jeder einzelne auctionbox betroffen ist. Wie würden Sie vorschlagen, ich isolieren Sie den timer zu handeln, die auf nur einem Element?

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

Wie erstellen Sie einen countdown-timer mit jQuery?

Der Grund, warum es wirkt sich auf alle von Ihnen ist, weil Sie arbeiten, auf die KLASSE, nicht die ID. Erstellen Sie eine eindeutige ID für das element.
Aha! Das war es dann. 🙂 Nun die andere Frage wäre, was-ID zuweisen, um jeden "auctionbox". Würde ich generieren nach Ihren Produkt-name? Wie würden Sie die Sie ein veteran webdev, eine ID zuweisen? Welchen Algorithmus würden Sie verwenden?
Btw vielleicht möchten Sie einen Blick auf diese wunderbare countdown plugin; keith-wood.name/countdown.html
Ich habe keine Ahnung, was Ihr backend aussieht oder welche Sprache Sie verwenden, es zu fahren, so habe ich keine Ahnung 🙂 Es kann alles sein, was Sie mögen!

InformationsquelleAutor Only Bolivian Here | 2011-08-29

11

Versuchen Sie die folgenden, ordnungsgemäß Ausgabe der count-down für die ausgewählten Werte.
```
$(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 Beispiel
- http://jsfiddle.net/n24BP/
Hinweis: in Diesem läuft der count-down-Sequenz, die auf jedes element, das hat die countdown Klasse. Wenn Sie möchten, um es restriktiver zu gestalten, um ein einzelnes element benötigen Sie zum ändern der selector von .countdown etwas restriktiver. Die einfachste Möglichkeit ist das hinzufügen einer id und Referenz das Element direkt.
```
<p id='theTarget'>15</p>
```
JavaScript ist ein wenig komplizierter hier, weil Sie möchten, dass der timer irgendwann abgeschaltet, denn es gibt nicht viel chance, oder die Nutzung des Elements mit einer doppelten id Hinzugefügt
```
$(document).ready(function() {

  var timer = setInterval(function() {

    var count = parseInt($('#theTarget').html());
    if (count !== 0) {
      $('#theTarget').html(count - 1);
    } else {
      clearInterval(timer);
    }
  }, 1000);
});
```
JSFiddle Beispiel
- http://jsfiddle.net/bSe9E/
langen Tag. Behoben
Du bist eine unhöfliche person.
Ich bin einfach nur müde. Es ist vier Uhr morgens, wo ich bin. @JaradPar -- als die Gefahr von weiteren lästigen Sr. Tapia, es ist immer noch falsch. Die Anzeige wird nicht mehr aktualisiert (eine große Verbesserung), aber der timer weiter läuft ad infinitum.
meine Antwort ist geschrieben unter der Annahme, dass andere DOM-Elemente mit der Klasse countdown kann jederzeit Hinzugefügt werden. Der Zähler läuft ewig, ist durch das design in diesem Fall behandeln
das ist entweder eine gute Erklärung oder eine clevere Abgleich. Wenn Ihr mir sagen könnt, war Ihrer Absicht, werde ich upvote.

InformationsquelleAutor 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);
```
Fiddle: http://jsfiddle.net/wwvEn/

wie geschrieben, das geht von 15 auf 14 und Stoppt dann.
Gute Antwort. Was passiert jedoch, sobald der Wert unter null? (wink). Auch sollte setInterval() setTimeout nicht
Mist eine sec...
ich fixe es
ich habe es behoben, es sollte jetzt funktionieren 🙂

InformationsquelleAutor Neal
1

Brauchen Sie nicht jQuery für diese (auch wenn es helfen bei der Einstellung text).

setInterval ist, was Sie wollen.
```
$.each(
    $('.countdown'), function(el) { 
         setInterval( function() { 
             $(this).text($(this).text()*1 - 1);
         }, 1000); 
    }
);
```
das hört nie auf. Es geht auf null, dann -1, dann -2...
Wann hat der OP sagen, Sie wollte, dass Sie aufhören zu zählen?
Wow, warum der Hass? Es war mein Verständnis, dass, SO ist nicht zu code Maschine, sondern ein Helfer - und das ist das, was ich getan habe. Ich gab dem OP einen basis zu arbeiten. Und wie @Neal sagte, es war nie technisch angegeben, dass es aufhören sollte.
das ist irgendwie der Punkt, der einen countdown. Fritz Lang, wer erfand den countdown für seinen 1929 film Die Frau Im Mond, erklärte, dass, wenn Sie gezählt , das Publikum nicht weiß, Wann die Rakete starten würde; count ab, jeder weiß, wenn man zu null, boom.
Ich verstehe zwar, dass Sie fühlen, Sie sollten aufhören, auf null (und ich nicht einverstanden), ich habe nicht das Gefühl, dass das schreiben, vollständig, und Fehler-Nachweis-code für jeden, der fragt, für den ist es richtig. Auch vermute ich, dass die Menschen verwendet werden, countdowns, ein bisschen, bevor 1929 🙂

InformationsquelleAutor josh.trow

CountdownTimer ist ein reverse-count-down jQuery-plugin für die Anzeige countdown nach Bedarf, mit unterschiedlichen Konfigurationsoptionen.

Einer minimalen jQuery countdown-Uhr plugin, welches ermöglicht, Sie zu zählen, auf ein Ziel-Datum, Zeit mit der Unterstützung von benutzerdefinierten Zeitzone UTC-offset.

Wie erstellen Sie einen countdown-timer mit jQuery?

Wie es zu benutzen:

jQuery-Bibliothek und jQuery countdown-Uhr plugin in Ihrem web-Seite.

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

Erstellen der Html-Code für einen countdown-Uhr mit einer unsortierten Liste.

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

Fügen Sie den folgenden CSS-Schnipsel, den Stil der countdown-Uhr.

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

InformationsquelleAutor 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);
```
Warum sind Sie mit each Durchlaufen Sie einen id-Selektor (sollte nur 1 element)? Merkwürdig erscheint vor allem, da die OP angegebenen eine Stil-Frage? Du bist auch neu aufgefüllt wird das HTML-element mit 15 statt mit dem Wert in der HTML.
Gute Fragen, auf die ich nur lahme Antworten. Wie ich ursprünglich schrieb, schaute ich bei Neals Antwort, die hatte die ID. Es war nicht (und ist nicht) mir klar, was der OP braucht. Ein countdown von 15? Ein countdown von dem aktuellen Wert, was ist es?
Die OP ist mehrdeutig auf ein paar dieser Elemente. Sie beide explizit gesetzt, wird die HTML-element 15 und dann setzen Sie es auf 15 Ihrer selbst (ein wenig seltsam). Vor allem war ich abgelenkt durch die each auf dem id-Selektor. Ich glaube nicht, dass irgendwelche funktionalen Wert, aber nicht gut genug mit js, um sicher sagen (Experimente Nein sagen). Hinweis: ich bin nicht der downvoter.
Über die einzelnen: Sie haben zu tun, etwas. Alle jQuery-Elemente bestehen aus "gewisse Anzahl" von DOM-Elementen. Auch wenn Sie als Programmierer weiß, dass ein "paar Nummer" 1 ist, der code nicht. $.each ist so gut wie jede, um es zu bekommen. "Funktionalen Wert" ist genau das, was Sie nicht haben, in die "funktionale Programmierung" Sinne "funktional".
Durch funktionelle meinte ich, hatte es einen funktionalen Unterschied zwischen der Verwendung each und nur den Aufruf der Methode auf $('#countdown') direkt. Ich glaube nicht, dass diese jemals produzieren ein diff kann aber schon überzeugt

InformationsquelleAutor Malvolio
0

Versuchen, diese in Ihrer Inspektor auf die Idee kommen, wie ein countdown-timer arbeiten soll:
```
var count = 15; setInterval("if(count>0)console.log(count--)", 1000)
```
Und hier ist der vollständige code für deinen Fall(keine jquery)
```
var counter = document.getElementsByClassName('countdown')[0],
    count = parseInt(counter);
setInterval("if(count>0)counter.innerHTML(count--)", 1000)
```
Nun, ich weiß, das mag funktionieren, aber warum tun Sie es? Sie zwingen die Maschine verwenden eval wenn Sie nur könnten, senden Sie eine saubere, anonyme Funktion zur Ausführung bereit.
Du hast Recht...

InformationsquelleAutor Mohsen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.