JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化するために、カウントダウン デモが作成されました。カウントダウンは、今日の Web サイトでよく使用される小さな機能です。気に入った場合は、そのままにして、日常的に使用する実用的な小さなスクリプトとして扱うことができます。 実装のアイデア 1. まず時間の値を取得し、時間の値から1を引いてカウントダウンを開始します。分59秒59 実装コード 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明
>>: 忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します
もう2020年です。飢えた人間は単純なテキストでは満足できなくなり、さまざまなスタイルの派手なテキス...
公式の Docker レジストリを使用して作成されたウェアハウスでは、イメージを削除してもデフォルト...
Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...
問題の説明(キープアライブとは何か)キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...
Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...
この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...
Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...
1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...
多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...
Docker 公式ドキュメントからの翻訳、原文: https://docs.docker.com/n...
この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...
この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...
序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...
エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...
1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...