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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript のカウントダウンとポップアップ ウィンドウによる特殊効果のプロンプト
  • JS カウントダウン実装コード (時間、分、秒)
  • JS カウントダウン (日、時間、分、秒)
  • シンプルで使いやすいカウントダウン js コード
  • ボタンをクリックしたときに60秒のカウントダウンを実現するjsコード
  • 2つのシンプルなjsカウントダウンメソッド
  • ネイティブ JS を使用して簡単なカウントダウン機能を実装する例
  • 数秒後にカウントダウンジャンプするjsの例
  • 優れたjs htmlページのカウントダウンは秒単位の精度になります
  • jsはクリックして確認コードを取得するカウントダウン効果を実現します

<<:  Linux に JDK1.8 をインストールするための詳細なチュートリアル

>>:  MySQL InnoDB 監視 (システム層、データベース層)

推薦する

Nginx コンテンツ キャッシュと共通パラメータ設定の詳細

使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...

CentOS8 デプロイメント LNMP 環境で mysql8.0.29 をコンパイルしてインストールする方法の詳細なチュートリアル

1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...

MySQL の垂直テーブルを水平テーブルに変換する方法と最適化のチュートリアル

1. 縦型テーブルと横型テーブル垂直テーブル: テーブル内のフィールドとフィールド値はキーと値の形式...

Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...

Vueプロジェクトでコンポーネントをカプセル化する簡単な手順

目次序文Toastコンポーネントをカプセル化する方法ユースケース具体的な実装要約する序文ビジネスが発...

HTMLタグと基本要素の学習のまとめ

1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...

CSS3 で虫眼鏡効果を模倣するいくつかの方法の原理の分析

記事のタイトルが「模造虫眼鏡」なのはなぜですか?今日お話ししたいのは、一般的に言われているような、マ...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...

Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

/******************** * キャラクターデバイスドライバー**********...

MySQL 8.0 の binlog の詳細な説明

1 はじめにバイナリ ログは、データを持つ、またはデータを変更する可能性がある SQL ステートメン...

Docker初心者が初めてよく使うコマンドを試してみる練習記録

Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...

html+vue+element-ui のスムーズさを 1 分で体験

テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...

Access_Tokenの統合管理を実現するミニプログラム開発

目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...

JavaScript 初心者のための二分探索木アルゴリズムのチュートリアル

目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...