web-dev-qa-db-ja.com

簡単な10秒のカウントダウンを作成する

次のような行が欲しい：

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

すでに10秒のダウンロードテキストが設定されており、他のstackoverflowの投稿を見ました。それらにはすべてCSSとJqueryが含まれます。 Javascript/HTMLタイマーだけが欲しいです。

「ダウンロードはx秒で開始されます」という簡単な行については、他のリクエストは行われていません。どうすればいいですか？

javascripthtmltimer
28
Joseph Christian Hefley

JavaScriptには、setIntervalという関数が組み込まれています。この関数は、2つの引数-関数callbackと整数timeoutを取ります。呼び出されると、setIntervalは、timeoutミリ秒ごとに指定した関数を呼び出します。

たとえば、500ミリ秒ごとにアラートウィンドウを作成したい場合は、次のようなことができます。

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

setInterval(makeAlert, 500);

ただし、関数に名前を付けたり、個別に宣言する必要はありません。代わりに、次のように関数をインラインで定義できます。

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

setIntervalが呼び出されると、戻り値でclearIntervalを呼び出すまで実行されます。これは、前の例が無限に実行されることを意味します。この情報をすべてまとめて、1秒ごとに更新される進行状況バーを作成し、10秒後に更新を停止できます。

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>

または、これによりテキストカウントダウンが作成されます。

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

これはテキストで行います。

<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

Promisesを使用したソリューションには、進行状況バーとテキストカウントダウンの両方が含まれます。

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