Cod pentru un cronometru simplu de numărătoare inversă JavaScript? (Programare, Jquery, Timer, Contor, Setinterval, Clearinterval)

Mike a intrebat.

Vreau să folosesc un cronometru simplu de numărătoare inversă care începe la 30 de secunde de la momentul în care funcția este rulată și se termină la 0. Fără milisecunde. Cum poate fi codificat?

12 răspunsuri
Faceți clic pe Upvote
var count=30;

var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     //counter ended, do something here
     return;
  }

  //Do code for showing the number of seconds here
}

Pentru ca codul pentru cronometru să apară într-un paragraf (sau oriunde altundeva în pagină), trebuie doar să pui linia:

<span id="timer"></span>

acolo unde doriți să apară secundele. Apoi inserați următoarea linie în pagina dvs. timer() astfel încât să arate astfel:

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}

Comentarii

  • Mulțumesc pentru răspuns. Am dificultăți în utilizarea acestuia deoarece cronometrul meu apare într-un paragraf. Cum pot pune 30, 29, 28, etc. în mijlocul unui paragraf? –  > Por Mike.
  • Mi-am editat răspunsul pentru a vă arăta cum să afișați cronometrul în paragraf 🙂 –  > Por Click Upvote.
  • În mijlocul unui paragraf (pe orizontală) : <p id=”timer” style=”text-align:center”></p> –  > Por Alsciende.
  • Faceți clic, cronometrul dvs. va afișa doar „0 secs”. Ar trebui să puneți actualizarea innerHTML după decrementare, nu în cazul final. –  > Por Alsciende.
  • Bună ziua, cum pot să opresc cronometrul să nu mai ruleze la încărcarea paginii și, în schimb, doar când este apăsat un buton? De asemenea, cum pot face să se reseteze cronometrul atunci când se apasă un buton după ce cronometrul a expirat deja? –  > Por crmepham.
Christian C. Salvadó

Am scris acest script cu ceva timp în urmă:

Utilizare:

var myCounter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec){console.log(sec);}, // callback for each second
    onCounterEnd: function(){ alert('counter ended!');} // final action
});

myCounter.start();

function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {
      counterEnd();
      instance.stop();
    }
    seconds--;
  }

  this.start = function () {
    clearInterval(timer);
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };

  this.stop = function () {
    clearInterval(timer);
  };
}

Comentarii

  • Mi-ar plăcea să îl folosesc în locul celuilalt. Când am fost blocat pentru a reporni numărul de pornire, văd că acesta funcționează bine… –  > Por Oki Erie Rinaldi.
  • Dacă am nevoie să opresc cumva cronometrul, cum fac asta? –  > Por S.I.J..
  • @S.I.J myCounter.stop(); –  > Por R3tep.
Niet the Dark Absol

Până acum, răspunsurile par să se bazeze pe faptul că codul este executat instantaneu. Dacă setați un timer pentru 1000ms, de fapt va fi în jur de 1008 în schimb.

Iată cum ar trebui să faci asta:

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = time-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },100); // the smaller this number, the more accurate the timer will be
}

Pentru a utiliza, apelați:

timer(
    5000, // milliseconds
    function(timeleft) { // called every step to update the visible countdown
        document.getElementById('timer').innerHTML = timeleft+" second(s)";
    },
    function() { // what to do after
        alert("Timer complete!");
    }
);

Comentarii

  • Spot on, așa cum ai spus că este singurul mod de a face acest lucru corect! –  > Por mcella.
  • I-am dat un deget mare în sus, cu un singur avertisment – în scopul afișării probabil că doriți să afișați tavanul (Math.ceil()) în loc de podea. Este foarte dezorientant când ceasul ajunge la 0 cu o secundă înainte ca alerta să se declanșeze. (Apoi, bineînțeles, trebuie să existe un apel suplimentar la update() înainte de complete()).  > Por Paul Williams.
Layton Everson

Iată încă unul, dacă cineva are nevoie de unul pentru minute și secunde:

    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    /* 
     * The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested. 
     * setTimeout('Decrement()',1000);
     */
    setTimeout(Decrement,1000); 

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    }

Comentarii

  • Nu ar trebui să treceți un șir de caractere la primul parametru al setTimeout, setTimeout(Decrement, 1000) este de preferat. stackoverflow.com/questions/6232574/… –  > Por Scottux.
  • Vă mulțumesc pentru sugestie, am actualizat scriptul. –  > Por Layton Everson.
Kedarnath

Comentarii

  • Acest script folosește practici foarte proaste din anii ’90. Și, de asemenea, 1,5 ore nu înseamnă 2 ore. Este 1 oră și 30 de minute. Ar trebui să folosiți Math.floor, nu Math.round –  > Por corbacho.
Rohit Sharma

Tocmai am modificat răspunsul lui @ClickUpvote:

Puteți utiliza IIFE (Expresie de funcție imediat invocată) și recursivitatea pentru a face acest lucru un pic mai ușor:

var i = 5;  //set the countdown
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        console.log(i + ' secs');  //do stuff here
        timer();
    }, 1000);
})();

Patrick Knott

Dezvoltând răspunsul acceptat, faptul că mașina ta intră în somn etc. poate întârzia funcționarea cronometrului. Puteți obține un timp real, cu prețul unei mici prelucrări. Acest lucru va da un timp real rămas.

<span id="timer"></span>

<script>
var now = new Date();
var timeup = now.setSeconds(now.getSeconds() + 30);
//var timeup = now.setHours(now.getHours() + 1);

var counter = setInterval(timer, 1000);

function timer() {
  now = new Date();
  count = Math.round((timeup - now)/1000);
  if (now > timeup) {
      window.location = "/logout"; //or somethin'
      clearInterval(counter);
      return;
  }
  var seconds = Math.floor((count%60));
  var minutes = Math.floor((count/60) % 60);
  document.getElementById("timer").innerHTML = minutes + ":" + seconds;
}
</script>

NVRM

De dragul performanțelor, acum putem folosi în siguranță requestAnimationFrame pentru o buclă rapidă, în loc de setInterval/setTimeout.

Atunci când se utilizează setInterval/setTimeout, dacă o sarcină de buclă durează mai mult decât intervalul, browserul va extinde pur și simplu bucla de interval, pentru a continua redarea completă. Acest lucru creează probleme. După câteva minute de setInterval/setTimeout supraîncărcare, acest lucru poate îngheța fila, browserul sau întregul calculator.

Dispozitivele de internet au o gamă largă de performanțe, astfel încât este destul de imposibil să se codifice în mod dur un interval de timp fix în milisecunde!

Folosind Date object, pentru a compara data de început Data Epoch și cea curentă. Acest lucru este mult mai rapid decât orice altceva, browserul se va ocupa de tot, la un ritm constant 60FPS (1000 / 60 = 16,66ms pe cadru) –un sfert de clipire a unui ochi– iar dacă sarcina din buclă necesită mai mult de atât, browserul va renunța la unele repictări.

Acest lucru permite o marjă înainte ca ochii noștri să își dea seama (Omul = 24FPS => 1000 / 24 = 41.66ms pe cadru = animație fluidă!)

https://caniuse.com/#search=requestAnimationFrame

Redu

Puteți face următoarele cu JS pur. Trebuie doar să furnizezi funcția cu numărul de secunde și ea va face restul.

Aiwatko

Pe baza soluției prezentate de @Layton Everson am dezvoltat un contor care include ore, minute și secunde:

var initialSecs = 86400;
var currentSecs = initialSecs;

setTimeout(decrement,1000); 

function decrement() {
   var displayedSecs = currentSecs % 60;
   var displayedMin = Math.floor(currentSecs / 60) % 60;
   var displayedHrs = Math.floor(currentSecs / 60 /60);

    if(displayedMin <= 9) displayedMin = "0" + displayedMin;
    if(displayedSecs <= 9) displayedSecs = "0" + displayedSecs;
    currentSecs--;
    document.getElementById("timerText").innerHTML = displayedHrs + ":" + displayedMin + ":" + displayedSecs;
    if(currentSecs !== -1) setTimeout(decrement,1000);
}

maztt

nikksan

Soluția mea funcționează cu formatele de dată și oră MySQL și oferă o funcție de callback. pe complition.Disclaimer: funcționează doar cu minute și secunde, deoarece de asta aveam nevoie.

jQuery.fn.countDownTimer = function(futureDate, callback){
    if(!futureDate){
        throw 'Invalid date!';
    }

    var currentTs = +new Date();
    var futureDateTs = +new Date(futureDate);

    if(futureDateTs <= currentTs){
        throw 'Invalid date!';
    }


    var diff = Math.round((futureDateTs - currentTs) / 1000);
    var that = this;

    (function countdownLoop(){
        // Get hours/minutes from timestamp
        var m = Math.floor(diff % 3600 / 60);
        var s = Math.floor(diff % 3600 % 60);
        var text = zeroPad(m, 2) + ':' + zeroPad(s, 2);

        $(that).text(text);

        if(diff <= 0){
            typeof callback === 'function' ? callback.call(that) : void(0);
            return;
        }

        diff--;
        setTimeout(countdownLoop, 1000);
    })();

    function zeroPad(num, places) {
      var zero = places - num.toString().length + 1;
      return Array(+(zero > 0 && zero)).join("0") + num;
    }
}

// $('.heading').countDownTimer('2018-04-02 16:00:59', function(){ // on complete})