JavaScript カウントダウンプロンプトボックス

この記事の例では、カウントダウンプロンプトボックスを実装するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <meta http-equiv="X-UA-compatible" content="ie=edge">
 <title>全画面プロンプトボックス</title>
 <スタイル>
  ＃ボタン{
   幅: 150ピクセル;
   高さ: 50px;
   背景色: 緑黄色;
  }
  .fullScreenDiv{/* フルスクリーン div */
   表示: なし;
   位置: 絶対;
   左: 0px;
   上: 0px;
   幅: 100%;
   高さ: 100%;
   背景色: rgba(0, 0, 0, 0.4);
  }
  .promptDiv{/* プロンプトボックス div */
   表示: なし;
   位置: 絶対;
   左: 50%;
   上位: 50%;
   変換: translateX(-50%) translateY(-50%);
   幅: 30%;
   高さ: 30%;
   境界線の半径: 20px;
   背景色:白;
   テキスト配置: 中央;
  }
  。近い{
   高さ: 34px;
   行の高さ: 34px;
   マージン: 0px;
   テキスト配置: 右;
   左上の境界線の半径: 20px;
   右上の境界線の半径: 20px;
   背景色: コーンフラワーブルー
  }
  .X{
   パディング: 2px 6px;
   右マージン: 8px;
   色: 白;
   カーソル: ポインタ;
  }
  .countDown{/*プロンプトボックスを閉じるまでのカウントダウン*/
   色: 赤;
   フォントサイズ: 28px;
  }
 </スタイル>
 <スクリプト>
  window.onload = 関数(){
   document.getElementById("button").addEventListener("click",function(){
    document.getElementsByClassName("fullScreenDiv")[0].style.display="block";
    document.getElementsByClassName("promptDiv")[0].style.display="block";
     (var i=5;i>=0;i--){
      (関数(i){
       setTimeout(関数(){
       var j=Math.abs(i-5); //i が 0 の場合、タイマーは 0 秒で、出力は abs(0-5)=5 になります。i が 5 の場合、タイマーは 5 秒で、出力は abs(i-5)=0 になります。   
       もしj==0なら
   document.getElementsByClassName("fullScreenDiv")[0].style.display="none";
        document.getElementsByClassName("promptDiv")[0].style.display="なし";
        }それ以外{
        document.getElementsByClassName("countDown")[0].innerHTML=j;
        }  
        },i*1000);//各間隔は1秒です
       }）（私）; 
      }
    });
     document.getElementsByClassName("X")[0].addEventListener("click",function(){
      document.getElementsByClassName("fullScreenDiv")[0].style.display="none";
      document.getElementsByClassName("promptDiv")[0].style.display="なし";
     }); 
  }
 </スクリプト>
</head>
<本文>
 <div>
  <button id="button">全画面プロンプトボックスを開く</button>
 </div>
 <div class="fullScreenDiv">
  <div class="promptDiv">
   <h4 class="close"><span class="X">X</span></h4>
    <p>私はフルスクリーンのプロンプトボックスです。私はフルスクリーンのプロンプトボックスです。私はフルスクリーンのプロンプトボックスです。</p>
    <p>カウントダウン終了</p>
    <span class="countDown">5</span>
  </div>
 </div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: