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パスワードとログインエラーの問題について簡単に説明します
この記事では主に、Web ページ上でデスクトップ exe プログラムを呼び出す方法を紹介します。 W...
手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...
1. チェックステータスモジュールがインストールされているかどうかを確認します。 [root@loc...
tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...
今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...
時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...
最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...
偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...
よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...
今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...
vim の動作モードを設定する (一時的) :set (モード情報) :set nu — 行番号を表...
目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...
この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...
目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...