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.

J'ai déjà configuré le texte de téléchargement de 10 secondes et j'ai regardé d'autres articles de stackoverflow. 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 puis-je faire?

Author: Joseph Christian Hefley, 2015-06-29
Source

3 answers

Cela vous donnera une barre de progression

var timeleft = 10;
var downloadTimer = setInterval(function(){
  document.getElementById("progressBar").value = 10 - --timeleft;
  if(timeleft <= 0)
    clearInterval(downloadTimer);
},1000);
<progress value="0" max="10" id="progressBar"></progress>
 40
Author: James McDowell, 2015-06-29 00:30:06

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>
 29
Author: Teddy Koker, 2015-06-29 01:22:17

Une solution utilisant des promesses, comprend à la fois la barre de progression et le 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>
 3
Author: Brandon Trecki, 2018-06-13 21:22:13