web-dev-qa-db-fra.com

Créez un compte à rebours simple de 10 secondes

Je voudrais une ligne qui dit:

Your download will begin in (10, 9, 8, etc. Beginning on page load) seconds.

Le texte de téléchargement de 10 secondes est déjà configuré et j’ai examiné d’autres publications. Ils incluent tous CSS et Jquery. Je voudrais juste une minuterie Javascript/HTML.

Aucune autre demande n'a été faite pour une simple ligne indiquant "Le téléchargement commencera dans x secondes". Comment je ferais ça?

javascripthtmltimer
28
Joseph Christian Hefley

JavaScript contient une fonction appelée setInterval, qui prend deux arguments: une fonction, callback et un entier, timeout. Lorsqu'il est appelé, setInterval appelle la fonction que vous lui attribuez toutes les timeout millisecondes.

Par exemple, si vous souhaitez créer une fenêtre d'alerte toutes les 500 millisecondes, vous pouvez procéder de la sorte.

function makeAlert(){ 
    alert("Popup window!");
};

setInterval(makeAlert, 500);

Cependant, vous n'avez pas à nommer votre fonction ni à la déclarer séparément. Au lieu de cela, vous pouvez définir votre fonction en ligne, comme ceci.

setInterval(function(){ alert("Popup window!"); }, 500);

Une fois que setInterval est appelé, il s'exécutera jusqu'à ce que vous appeliez clearInterval sur la valeur de retour. Cela signifie que l'exemple précédent fonctionnerait simplement à l'infini. Nous pouvons rassembler toutes ces informations pour créer une barre de progression qui se mettra à jour toutes les secondes et après 10 secondes, arrêtera la mise à jour.

var timeleft = 10;
var downloadTimer = setInterval(function(){
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
  }
}, 1000);
<progress value="0" max="10" id="progressBar"></progress>

Sinon, cela créera un compte à rebours de texte.

var timeleft = 10;
var downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished"
  }
}, 1000);
<div id="countdown"></div>
73
James McDowell

Cela le fait dans le texte.

<p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p>

<script type="text/javascript">
    var timeleft = 10;
    var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0)
        clearInterval(downloadTimer);
    },1000);
</script>
36
Teddy Koker

Une solution utilisant Promises comprend à la fois une barre de progression et un compte à rebours de texte.

ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert(`Page has started: ${value}.`));

function ProgressCountdown(timeleft, bar, text) {
  return new Promise((resolve, reject) => {
    var countdownTimer = setInterval(() => {
      timeleft--;

      document.getElementById(bar).value = timeleft;
      document.getElementById(text).textContent = timeleft;

      if (timeleft <= 0) {
        clearInterval(countdownTimer);
        resolve(true);
      }
    }, 1000);
  });
}
<div class="row begin-countdown">
  <div class="col-md-12 text-center">
    <progress value="10" max="10" id="pageBeginCountdown"></progress>
    <p> Begining in <span id="pageBeginCountdownText">10 </span> seconds</p>
  </div>
</div>
4
Brandon Trecki