JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブコードの記述能力を高め、setTimeout() の使用を強化するために、カウントダウンデモが作成されました。カウントダウンは、今日の Web サイトでよく使用される小さな機能です。気に入った場合は、そのままにして、日常的に使用する実用的な小さなスクリプトとして扱うことができます。

実装のアイデア

1. まず時間の値を取得し、時間の値から1を引いてカウントダウンを開始します。分59秒59
2. 秒の一の位は 9 から減少します。秒の一の位が 0 未満の場合、秒の十の位は 1 減少します。
3. 秒の十の位が 0 未満の場合、分の一の位が 1 減らされます。
4. 分の1の位が0未満の場合、分の10の位が1減らされます。
5. 分の十の位が0未満の場合は、時間から1を引きます。
6. 時間が 0 未満になるとタイマーが停止し、すべての時間が 0 に設定されます。

実装コード

html

<p>カウントダウン:</p>
<span id="時間">5</span>
<span>:</span>
<span id="minuteTen">0</span>
<span id="minuteBit">0</span>
<span>:</span>
<span id="secondTen">0</span>
<span id="secondBit">0</span>

スパン{
 表示: インラインブロック;
 幅: 20px;
 高さ: 20px;
 背景色: #000000;
 色: #ffffff;
 テキスト配置: 中央;
 }

JavaScript

 関数time(){
 /*時間*/
 var hourTxt = document.getElementById("hour");
 var hour = parseInt(document.getElementById("hour").innerHTML);
 /*分*/
 var minuteTenTxt = document.getElementById("minuteTen");
 var minuteBitTxt = document.getElementById("minuteBit");
 var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
 var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
 /*2番*/
 var secondTenTxt = document.getElementById("secondTen");
 var secondBitTxt = document.getElementById("secondBit");
 var secondTen = parseInt(document.getElementById("secondTen").innerHTML);
 var secondBit = parseInt(document.getElementById("secondBit").innerHTML);
 関数開始(){
 時間 - ;
 hourTxt.innerHTML = 時間;
 分十 = 5;
 minuteTenTxt.innerHTML = minuteTen;
 分ビット = 9;
 minuteBitTxt.innerHTML = minuteBit;
 2番目の10 = 5;
 secondTenTxt.innerHTML = secondTen;
 秒ビット = 9;
 secondBitTxt.innerHTML = secondBit;

 /*secondBit が減少し始める*/
 関数 second(){
  秒ビット--;
  secondBitTxt.innerHTML = secondBit;

  /*10秒後*/
  if(第2ビット < 0){
  2番目10--;
  secondTenTxt.innerHTML = secondTen;
  秒ビット = 9;
  secondBitTxt.innerHTML = secondBit;
  /*カウントダウンを続ける*/
  setTimeout(秒、1000);

  /*1分後*/
  if(secondTen < 0){
   分ビット--;
   minuteBitTxt.innerHTML = minuteBit;
   2番目の10 = 5;
   secondTenTxt.innerHTML = secondTen;
   秒ビット = 9;
   secondBitTxt.innerHTML = secondBit;

   /*10分後*/
   分ビット < 0 の場合
   分10--;
   minuteTenTxt.innerHTML = minuteTen;
   分ビット = 9;
   minuteBitTxt.innerHTML = minuteBit;
   }

   /*1時間後*/
   if(分10 < 0){
   時間 - ;
   hourTxt.innerHTML = 時間;
   分十 = 5;
   minuteTenTxt.innerHTML = minuteTen;
   分ビット = 9;
   minuteBitTxt.innerHTML = minuteBit;
   2番目の10 = 5;
   secondTenTxt.innerHTML = secondTen;
   秒ビット = 9;
   secondBitTxt.innerHTML = secondBit;
   }

   /*カウントダウン終了*/
   時間 < 0 の場合
   時間 = 0;
   hourTxt.innerHTML = 時間;
   分十 = 0;
   minuteTenTxt.innerHTML = minuteTen;
   分ビット = 0;
   minuteBitTxt.innerHTML = minuteBit;
   2番目の10 = 0;
   secondTenTxt.innerHTML = secondTen;
   秒ビット = 0;
   secondBitTxt.innerHTML = secondBit;
   clearTimeout(秒);
   タイムアウトをクリアします(開始);
   }
  }
  }それ以外{
  setTimeout(秒、1000);
  }
 }
 setTimeout(秒、1000);

 }
 タイムアウトを設定します(開始、1000);
}

実行ページ