序文: 多くのページで、カウントダウンや時間に関連したエフェクトを見ることができます。今日は、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 スタイルをプログラムで処理するためのサンプル コード
1. 準備1.1 港ダウンロードハーバーダウンロードアドレス:リンクリンクの説明を追加し、必要なバー...
序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...
この記事では、MySQL ストアド プロシージャの使用方法について説明します。ご参考までに、詳細は以...
序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...
序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...
シンプルな Linux 推測ゲームのソースコードゲームのルール:数字当てゲームは通常 2 人でプレイ...
成果を達成する要件/機能: CSS + HTML を使用してハートを描く方法。分析:正方形と 2 つ...
Docker Swarm は、Docker によって開発されたコンテナ クラスター管理サービスです。...
MYSQL でよく使用されるクエリ コマンド: mysql> select version()...
1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....
//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...
この記事の例では、ボタンをクリックすることで4桁のランダムな検証コードを生成するjsの具体的なコード...
目次1. 子プロセス2. nodejsでのコマンド実行2.1 16進数エンコード2.2 ユニコードエ...
覚えて: IDE ディスク: 最初のディスクは hda、2 番目のディスクは hdb...最初のディ...
目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...