compte à rebours simple en javascript

Question

Je suis à la recherche d'un simple compte à rebours en javascript. Tous les scripts que je trouve sont 'all singing all dancing'. Je veux juste un compte à rebours sans jQuery, avec un minimum de tracas, qui affiche en minutes et en secondes. Merci.

Answer 1

Regarde ça :

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

<label id="minutes">00</label>:<label id="seconds">00</label>

Answer 2

Timer pour jQuery - plus petit, fonctionnel, testé.

    var sec = 0;
    function pad ( val ) { return val > 9 ? val : "0" + val; }
    setInterval( function(){
        $("#seconds").html(pad(++sec%60));
        $("#minutes").html(pad(parseInt(sec/60,10)));
    }, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="minutes"></span>:<span id="seconds"></span>

Pure JavaScript :

    var sec = 0;
    function pad ( val ) { return val > 9 ? val : "0" + val; }
    setInterval( function(){
        document.getElementById("seconds").innerHTML=pad(++sec%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
    }, 1000);

<span id="minutes"></span>:<span id="seconds"></span>

Mise à jour :

Ce site réponse montre comment rembourrer.

Arrêt de setInterval MDN est réalisé avec clearInterval MDN

var timer = setInterval ( function(){...}, 1000 );
...
clearInterval ( timer );

Violon

Answer 3

Le code suivant fonctionne comme un compte à rebours. C'est un code JavaScript pur qui montre hour:minute:second . Il dispose également d'un bouton STOP :

var timerVar = setInterval(countTimer, 1000);
var totalSeconds = 0;
function countTimer() {
           ++totalSeconds;
           var hour = Math.floor(totalSeconds /3600);
           var minute = Math.floor((totalSeconds - hour*3600)/60);
           var seconds = totalSeconds - (hour*3600 + minute*60);
           if(hour < 10)
             hour = "0"+hour;
           if(minute < 10)
             minute = "0"+minute;
           if(seconds < 10)
             seconds = "0"+seconds;
           document.getElementById("timer").innerHTML = hour + ":" + minute + ":" + seconds;
        }

<div id="timer"></div>
<div id ="stop_timer" onclick="clearInterval(timerVar)">Stop time</div>

Answer 4

J'ai dû créer un minuteur pour les enseignants qui évaluent le travail des élèves. Voici celui que j'ai utilisé, qui est entièrement basé sur le temps écoulé depuis le début de l'évaluation, en stockant l'heure système au moment où la page est chargée, puis en la comparant toutes les demi-secondes à l'heure système à ce moment-là :

var startTime = Math.floor(Date.now() / 1000); //Get the starting time (right now) in seconds
localStorage.setItem("startTime", startTime); // Store it if I want to restart the timer on the next page

function startTimeCounter() {
    var now = Math.floor(Date.now() / 1000); // get the time now
    var diff = now - startTime; // diff in seconds between now and start
    var m = Math.floor(diff / 60); // get minutes value (quotient of diff)
    var s = Math.floor(diff % 60); // get seconds value (remainder of diff)
    m = checkTime(m); // add a leading zero if it's single digit
    s = checkTime(s); // add a leading zero if it's single digit
    document.getElementById("idName").innerHTML = m + ":" + s; // update the element where the timer will appear
    var t = setTimeout(startTimeCounter, 500); // set a timeout to update the timer
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

startTimeCounter();

De cette façon, il importe peu que le "setTimeout" soit soumis à des retards d'exécution, le temps écoulé est le suivant toujours relatif à l'heure du système au moment où il a commencé, et à l'heure du système au moment de la mise à jour.

Answer 5

J'ai bidouillé le code de Bakudan et d'autres codes dans stackoverflow pour obtenir tout en un.

Mise à jour #1 : Ajout de plus d'options. Maintenant Démarrer, pause, reprendre, réinitialiser et redémarrer. Mélangez les fonctions pour obtenir les résultats souhaités.

Mise à jour n°2 : JQuery a été remplacé par du JS pur et ajouté comme extrait de code.

Pour la version précédente de fiddle basée sur Jquery : https://jsfiddle.net/wizajay/rro5pna3/305/

var Clock = {
  totalSeconds: 0,
  start: function () {
    if (!this.interval) {
        var self = this;
        function pad(val) { return val > 9 ? val : "0" + val; }
        this.interval = setInterval(function () {
          self.totalSeconds += 1;

          document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60));
          document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60));
        }, 1000);
    }
  },

  reset: function () {
    Clock.totalSeconds = null; 
    clearInterval(this.interval);
    document.getElementById("min").innerHTML = "00";
    document.getElementById("sec").innerHTML = "00";
    delete this.interval;
  },
  pause: function () {
    clearInterval(this.interval);
    delete this.interval;
  },

  resume: function () {
    this.start();
  },

  restart: function () {
     this.reset();
     Clock.start();
  }
};

document.getElementById("startButton").addEventListener("click", function () { Clock.start(); });
document.getElementById("pauseButton").addEventListener("click", function () { Clock.pause(); });
document.getElementById("resumeButton").addEventListener("click", function () { Clock.resume(); });
document.getElementById("resetButton").addEventListener("click", function () { Clock.reset(); });
document.getElementById("restartButton").addEventListener("click", function () { Clock.restart(); });

<span id="min">00</span>:<span id="sec">00</span>

<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
<input id="resetButton" type="button" value="Reset">
<input id="restartButton" type="button" value="Restart">