私は数日前にJSを学び、2つの非常に興味深い関数、つまりSetimeOut関数とSetInterval関数を見ました。これらの2つの機能により、Webページは、Picture CarouselsなどのWebページに非常に一般的な効果をもたらすことができます。以下のこれら2つの機能について学びましょう!
SettimeOut関数とSetInterval関数の構文とアプリケーション
1.SettimeOut関数
定義と使用法:Settimeout()メソッドは、指定されたミリ秒の後に関数を呼び出すか、式を計算するために使用されます。
構文:setimeout(code、millisec);
パラメーター:
コード(必須):関数が呼び出される後に実行されるJavaScriptコード文字列。
Millisec(必須):コードを実行する前に待機するミリ秒数。
ヒント:
setimeout()はコードを1回だけ実行します。複数回呼び出す場合は、setInterval()を使用するか、コード自体にsettimeout()を再度呼び出します。
返品値
window.cleartimeout()に渡すことができる値を、コードの定期的な実行をキャンセルします。
Settimeoutはタイマー関数であるため、タイマーをクリーンアップする機能があるため、ClearTimeout関数を使用します。
cleartimeout(settimeout()によって返されたid値);
2.インターバル定義をセットします
setInterval()メソッドは関数を呼び出すか、指定された期間(ミリ秒単位)に従って式を計算します。
SetInterval()メソッドは、ClearInterval()が呼び出されるか、ウィンドウが閉じられるまで、関数を連続的に呼び出します。 setInterval()によって返されるID値は、ClearInterval()メソッドのパラメーターとして使用できます。
文法
setInterval(code、millisec [、 "lang"]);
パラメーターコードが必要です。呼び出される関数または実行するコードの文字列。
ミリセックはしなければなりません。ミリ秒単位での定期的な実行または呼び出しコードの間隔
返品値
window.clearinterval()に渡すことができる値をコードの定期的な実行をキャンセルします。
Settimeoutはタイマー関数であるため、タイマーをクリーンアップする機能があるため、ClearInterval()関数を使用します。
clearInterval()(setinterval()によって返されるid値);
2。ケース:
カウントダウン効果
<!Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-teque" content = "text/html; charset = utf-8"/> <titldowd effect type = <> <titlddown effecmカウントダウン効果VAR T1を達成する方法。 window.onload = function(){// 01 [スタート]ボタンへの位置とdomオブジェクトVar btns = document.getElementById( 'btnstart'); // 02。 [スタート]ボタンBTNS.ONCLICK = function()のクリックイベントを登録します{// setinterval関数の最初のパラメーターが定期的に実行される関数を実行し、2番目のパラメーターはすべてのミリ秒T1 = setInterval(start、1000)を実行する関数です。 } // 03 STOPボタンへの位置DOMオブジェクトを返すvar btnst = document.getElementById( 'btnstop'); btnst.onclick = function(){clearinterval(t1); }} //実行される関数1秒の関数start(){// 01。 divのテキストを取得して、変数var divddy = document.getElementById( 'msg')に割り当てます。 var divnum = divdom.innertext; // divnumの値が0であるかどうかを判断しますif(divnum> 0){divnum--; //減算値をdivnum vivdam.innertext = divnumに再割り当てします。 }} </script> </head> <body> <入力タイプ= "ボタン" id "id =" btnstart "value =" start "/> <入力タイプ="ボタン "id" id "id" id "id" id "id" id "id" id "id" balue = "stop"/> <br/> <div = "msg"> 10 </div> </body> </html> </html> </html> <背景画像の切り替え:
<!Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <pittation> <pitter> </<titl> 1; //デフォルトのwindow.onload = function(){//最初の画像に初期変数を最初の画像に定義します。 } //実行される関数function show(){//画像が最後の(5枚の写真)に到達した場合、次の表示画像を最初の画像に変更します。最後の画像に到達しない場合、(count> 5){count = 1;の場合、次の画像が表示されます。 } else {count ++; } // id myimg var dom = document.getElementById( "myimg")でdomオブジェクトを取得します。 // IMGタグのSRC属性ポインティングを変更し、画像dom.src = "image/"+count+"。jpg"} </head> <body> <body> <body> <img src = "image/1.jpg" id = "myimg"/> </body> </html> </html>名前の発信者
<!doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <pittited> <pitter> <> <pitr> namer var data = ['Zhang San'、 'li Si'、 'wang er'、 'Xiao Chen'、 'Xiao Zhang']に基本的なデータを保存するには。 var i = 0; //初期変数を宣言して、デフォルトでVar T1で最初の人をページに表示するようにします。 window.onload = function(){// 02。 start-nameボタンのDOMオブジェクトを取得して、オブジェクトのクリックイベントを登録しますvar dom = document.getElementById( "mybtn"); dom.onclick = function(){// setinterval関数を使用して結果関数t1 = setInterval(start、500)を呼び出す; //このメソッドは、Settimeout(STOP、6000)のみを呼び出します。 } //匿名関数を定義して変数結果に割り当てますvar start = function(){// 03get h1タグオブジェクトをh1タグvar domh = document.getelementbyid( "myh1")のテキストに割り当てます; domh.innertext = data [i%data.length]; //既存の要素値i ++を置き換える; } //匿名関数start()を呼び出します; var stop = function(){//タイマーClearInterval(T1); //プロンプトボックスをクリックする生徒がポップアップしてアラートに答えます( "please" + document.getElementById( "myh1")。innertext + "inoust ness"); }}} </script> </head> <body> <h1 id = "myh1"> </h1> <button id = "mybtn"> </button> </body> </html>を呼び出し始めます上記のケースを通して、私は誰もがこれらの2つの機能に精通しているべきだと思います。
上記の記事には、SettimeOut関数とSetInterval関数を深く理解しています。この記事は、私があなたと共有したすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。