JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化するために、カウントダウン デモが作成されました。カウントダウンは、今日の Web サイトでよく使用される小さな機能です。気に入った場合は、そのままにして、日常的に使用する実用的な小さなスクリプトとして扱うことができます。

実装のアイデア

1. まず時間の値を取得し、時間の値から1を引いてカウントダウンを開始します。分59秒59
2. 秒の一の位は 9 から減少します。秒の一の位が 0 未満の場合、秒の十の位は 1 減少します。
3. 秒の十の位が 0 未満の場合、分の一の位が 1 減らされます。
4. 分の1の位が0未満の場合、分の10の位が1減らされます。
5. 分の十の位が0未満の場合は、時間から1を引きます。
6. 時間が 0 未満になるとタイマーが停止し、すべての時間が 0 に設定されます。

実装コード

html

<p>カウントダウン:</p>
<span id="時間">5</span>
<span>:</span>
<span id="minuteTen">0</span>
<span id="minuteBit">0</span>
<span>:</span>
<span id="secondTen">0</span>
<span id="secondBit">0</span>

CS

スパン{
 表示: インラインブロック;
 幅: 20px;
 高さ: 20px;
 背景色: #000000;
 色: #ffffff;
 テキスト配置: 中央;
 }

JavaScript

 関数time(){
 /*時間*/
 var hourTxt = document.getElementById("hour");
 var hour = parseInt(document.getElementById("hour").innerHTML);
 /*分*/
 var minuteTenTxt = document.getElementById("minuteTen");
 var minuteBitTxt = document.getElementById("minuteBit");
 var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
 var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
 /*2番*/
 var secondTenTxt = document.getElementById("secondTen");
 var secondBitTxt = document.getElementById("secondBit");
 var secondTen = parseInt(document.getElementById("secondTen").innerHTML);
 var secondBit = parseInt(document.getElementById("secondBit").innerHTML);
 関数開始(){
 時間 - ;
 hourTxt.innerHTML = 時間;
 分十 = 5;
 minuteTenTxt.innerHTML = minuteTen;
 分ビット = 9;
 minuteBitTxt.innerHTML = minuteBit;
 2番目の10 = 5;
 secondTenTxt.innerHTML = secondTen;
 秒ビット = 9;
 secondBitTxt.innerHTML = secondBit;

 /*secondBit が減少し始める*/
 関数 second(){
  秒ビット--;
  secondBitTxt.innerHTML = secondBit;

  /*10秒後*/
  if(第2ビット < 0){
  2番目10--;
  secondTenTxt.innerHTML = secondTen;
  秒ビット = 9;
  secondBitTxt.innerHTML = secondBit;
  /*カウントダウンを続ける*/
  setTimeout(秒、1000);

  /*1分後*/
  if(secondTen < 0){
   分ビット--;
   minuteBitTxt.innerHTML = minuteBit;
   2番目の10 = 5;
   secondTenTxt.innerHTML = secondTen;
   秒ビット = 9;
   secondBitTxt.innerHTML = secondBit;

   /*10分後*/
   分ビット < 0 の場合
   分10--;
   minuteTenTxt.innerHTML = minuteTen;
   分ビット = 9;
   minuteBitTxt.innerHTML = minuteBit;
   }

   /*1時間後*/
   if(分10 < 0){
   時間 - ;
   hourTxt.innerHTML = 時間;
   分十 = 5;
   minuteTenTxt.innerHTML = minuteTen;
   分ビット = 9;
   minuteBitTxt.innerHTML = minuteBit;
   2番目の10 = 5;
   secondTenTxt.innerHTML = secondTen;
   秒ビット = 9;
   secondBitTxt.innerHTML = secondBit;
   }

   /*カウントダウン終了*/
   時間 < 0 の場合
   時間 = 0;
   hourTxt.innerHTML = 時間;
   分十 = 0;
   minuteTenTxt.innerHTML = minuteTen;
   分ビット = 0;
   minuteBitTxt.innerHTML = minuteBit;
   2番目の10 = 0;
   secondTenTxt.innerHTML = secondTen;
   秒ビット = 0;
   secondBitTxt.innerHTML = secondBit;
   clearTimeout(秒);
   タイムアウトをクリアします(開始);
   }
  }
  }それ以外{
  setTimeout(秒、1000);
  }
 }
 setTimeout(秒、1000);

 }
 タイムアウトを設定します(開始、1000);
}

実行ページ

終了ページ

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

以下もご興味があるかもしれません:
  • JavaScript setTimeout()の基本的な使い方は何ですか?
  • JavaScript setInterval() と setTimeout() タイマー
  • settimeoutを使用するだけで、JavaScriptの動作メカニズムを確認できます。
  • setTimeout を通して JS の動作メカニズムを理解する方法
  • setTimeoutからのjs関数実行プロセスを見てみましょう
  • js setTimeout を使用してラウンドロビンアニメーションを実装する方法を学ぶ
  • JavaScript タイマーの使用状況の分析 [setTimeout と clearTimeout]
  • JS のタイマー setInterval と setTImeout の this ポイント問題の詳細な説明
  • JavaScript の setTimeout について
  • JS for ループで setTimeout を使用する 4 つのソリューション

<<:  nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明

>>:  忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

推薦する

ウェブページ上でデスクトップ exe プログラムを呼び出す簡単な方法

この記事では主に、Web ページ上でデスクトップ exe プログラムを呼び出す方法を紹介します。 W...

MySQL グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...

Nginx 構成検出サービスのステータスを実装する方法

1. チェックステータスモジュールがインストールされているかどうかを確認します。 [root@loc...

Tomcat でサーブレット URL パターンを構成する際の問題の詳細な説明

tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用

時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...

LinuxにDockerをインストールする(非常に簡単なインストール方法)

最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...

Vue.$set の失敗の落とし穴の発見と解決

偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...

MySQL のデータ統計に関するヒント

よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...

Dockerイメージ解析ツールのダイブ原理解析

今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...

Linux システムで Vim を使用してリモート ファイルを読み書きするコマンドの詳細な説明

vim の動作モードを設定する (一時的) :set (モード情報) :set nu — 行番号を表...

JavaScript スロットリングとアンチシェイクに関する簡単な説明

目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

Linuxにおけるumaskコマンドの使用原理と計算方法の詳しい解説

目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...