序文: 多くのページで、カウントダウンや時間に関連したエフェクトを見ることができます。今日は、Xiao Xiong が JavaScript でのカウントダウンの概要を説明します。 1. setTimeout() タイマー文法: window.setTimeout(関数を呼び出す、[ミリ秒単位の遅延]);
コードは次のとおりです。 window.setTimeout(関数(){ アラート('こんにちは'); },5000); 実行結果は次のとおりです。 以下の点に注意してください。
2. setTimeout() タイマーを停止するタイマーを作成したら、それをキャンセルしたい場合はどうすればよいでしょうか?タイマーをクリアする関数は次のように使用します。 ウィンドウのクリアタイムアウト(タイムアウトID)
例えば: 上記の場合、指定したイベントの前に停止したい場合は、まずクリックボタンを追加し、このボタンにタイマーをクリアするイベントを追加します。操作は次のとおりです。 var hello = window.setTimeout(function(){ アラート('こんにちは'); },5000); var btn = document.querySelector('ボタン'); btn.addEventListener('click',function(){ ウィンドウをクリアします。 }) 実行効果は次のとおりです。 停止ボタンをクリックしないと、5 秒後に「Hello」がポップアップ表示されることがわかります。ページを更新した後、ボタンをクリックすると、どれだけ時間がかかってもポップアップ ウィンドウは表示されず、タイマーが正常にクリアされます。 3. setInterval() タイマー別のタイプのタイマーを見てみましょう。 window.setInterval(コールバック関数、[ミリ秒単位の間隔]);
例えば: 毎秒 'hello' を出力するタイマーを書いてみましょう。コードは次のとおりです。 setInterval(関数(){ console.log('こんにちは') },1000); 実行効果は次のとおりです。 4. setInterval() タイマーをクリアする同様に、setInterval() タイマーの効果もクリアできます。構文は次のとおりです。 ウィンドウをクリアします。
たとえば、現在 2 つのボタンがあります。一方をクリックするとタイマーが開始され、もう一方をクリックするとタイマーがクリアされます。操作方法は次のとおりです。 <本文> <button class='begin'>開始</button> <button class='stop'>停止</button> <スクリプト> var btn = document.querySelectorAll('ボタン'); var タイマー = null; btn[0].addEventListener('click',function(){ タイマー = setInterval(関数(){ console.log('こんにちは'); },1000) }) btn[1].addEventListener('click',function(){ クリアインターバル(タイマー) }) </スクリプト> </本文> 実行効果は次のとおりです。 5. 電子時計ケースこれで、現在の年、月、日、時間、分、秒を表示し、自動的に変更できる電子時計を作成できます。コードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> div { 幅: 500ピクセル; マージン: 100px 自動; フォントサイズ: 25px; } </スタイル> </head> <本文> <div></div> <スクリプト> var div = document.querySelector('div'); 関数 showTime(){ var date = 新しい Date(); var y = date.getFullYear(); var m = date.getMonth()+1; m = m>=10?m:'0'+m; var d = date.getDate(); d = d>=10?d:'0'+d; var h = date.getHours(); h = h>=10?h:'0'+h; var dm = date.getMinutes(); dm = dm>=10?dm:'0'+dm; var ds = date.getSeconds(); ds = ds>=10?ds:'0'+ds; var str = y+'年'+m+'月'+d+'日'+h+'時'+dm+'分'+ds+'秒'; div.innerHTML = str; タイムアウトを設定します(showTime,1000); } ウィンドウのonload = showTime(); </スクリプト> </本文> </html> 実行効果は次のとおりです。 JavaScript タイマーの原理に関するこの記事はこれで終わりです。JavaScript タイマーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS スタイルをプログラムで処理するためのサンプル コード
CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...
序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...
1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...
目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...
目次1. 概要2. dockerを使用してTomcatをデプロイし、Skywalkingに接続する要...
赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...
目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...
目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...
目次1. 基本2. ノード、ツリー、仮想DOM 1. 仮想DOM 3. createElementパ...
概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...
1. Linuxシステムにクロスシステムファイル転送ツールをインストールするルートユーザーのルートデ...
目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...
背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...
<abbr>タグと<acronym>タグは、Web ページに表示される略語と...