この記事の例では、カウントダウンプロンプトボックスを実装するための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 監視 (システム層、データベース層)
SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...
Win10 で csv をエクスポートする方法は 2 つあります。1 つ目はツールを使用することです...
この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...
最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...
Ubuntu 18.04 上の Apache で動作するように phpMyAdmin をインストール...
<br />関連記事: innerHTML HTML DOM insertRow() メ...
1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...
最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...
初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...
この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...
1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...
この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...
目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...
この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...
目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...