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 監視 (システム層、データベース層)

推薦する

Ubuntu環境でのSSHの詳細なインストールと使用

SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...

Win10 MySQLでCSVをエクスポートする2つの方法

Win10 で csv をエクスポートする方法は 2 つあります。1 つ目はツールを使用することです...

MySQL Installer Community 5.7.16 インストール詳細チュートリアル

この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

Ubuntu 18.04 に phpMyAdmin をインストールするための詳細なチュートリアル

Ubuntu 18.04 上の Apache で動作するように phpMyAdmin をインストール...

innerHTML を理解する

<br />関連記事: innerHTML HTML DOM insertRow() メ...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...

NavicatがLinuxサーバー上のMySQLに接続できない問題を解決する

最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...

初心者がHTMLタグを学ぶ(2)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

MySQLストアドプロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

Flask アプリケーションの Docker デプロイ実装手順

1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...

デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...

Mysqlの日付と時刻関数を扱う記事

目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...