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パスワードとログインエラーの問題について簡単に説明します

推薦する

Quill エディタでカスタム HTML レコードを挿入する詳細な例

もう2020年です。飢えた人間は単純なテキストでは満足できなくなり、さまざまなスタイルの派手なテキス...

Nexus を使用して Docker リポジトリを作成する方法

公式の Docker レジストリを使用して作成されたウェアハウスでは、イメージを削除してもデフォルト...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...

Vue でのキープアライブコンポーネントの使用例

問題の説明(キープアライブとは何か)キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...

Docker ビルド PHP 環境チュートリアル詳細説明

Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...

JS はシンプルなブロック崩しピンボールゲームを実装します

この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...

Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...

Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する

1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

Dockerにおけるオーバーレイネットワークの詳細な説明

Docker 公式ドキュメントからの翻訳、原文: https://docs.docker.com/n...

Docker を使用した MySQL のデプロイの詳細説明 (データ永続化)

この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...

MySQL トリガー: トリガーの作成と使用

この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...

AngularパイプラインPIPEの紹介と使い方

序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

MySQL の重要なパフォーマンス インデックスの計算と最適化方法の概要

1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...