この記事の例では、カウントダウンプロンプトボックスを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux に JDK1.8 をインストールするための詳細なチュートリアル
>>: MySQL InnoDB 監視 (システム層、データベース層)
使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...
1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...
1. 縦型テーブルと横型テーブル垂直テーブル: テーブル内のフィールドとフィールド値はキーと値の形式...
目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...
目次序文Toastコンポーネントをカプセル化する方法ユースケース具体的な実装要約する序文ビジネスが発...
1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...
記事のタイトルが「模造虫眼鏡」なのはなぜですか?今日お話ししたいのは、一般的に言われているような、マ...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
/******************** * キャラクターデバイスドライバー**********...
1 はじめにバイナリ ログは、データを持つ、またはデータを変更する可能性がある SQL ステートメン...
Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...
テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...
目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...
目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...
目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...