[解決済み] 簡単な10秒のカウントダウンを作成する

質問

というセリフが欲しいです。

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

10秒ダウンロードのテキストはすでに設定済みで、他のstackoverflowの投稿も見ています。それらはすべてCSSとJqueryを含んでいます。私はちょうどJavascript / HTMLタイマーをしたいです。

他に要望がないのは、「"あなたのダウンロードは○秒後に始まります"」というシンプルな行だけです。どうすればいいでしょうか？

どのように解決するのですか？

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(){
  if(timeleft <= 0){
    clearInterval(downloadTimer);
  }
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
}, 1000);

<progress value="0" max="10" id="progressBar"></progress>

また、テキストのカウントダウンを作成することもできます。

var timeleft = 10;
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);

<div id="countdown"></div>