ホームページ >ウェブフロントエンド >htmlチュートリアル >javascript(タイミング関数)_html/css_WEB-ITnose
javascript(タイミング関数)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:17:281071ブラウズ
setTimeout 関数と setInterval 関数の構文と応用
1.setTimeout 関数
定義と使用法: setTimeout() メソッドは、関数を呼び出すか、指定された数値の後の式を計算するために使用されますミリ秒単位。
構文: setTimeout(code,millisec);
パラメータ:
コード (必須): 呼び出される関数の後に実行される JavaScript コード文字列。
millisec (必須): コードを実行する前に待機するミリ秒数。
注:
setTimeout() はコードを 1 回だけ実行します。複数回呼び出す場合は、setInterval() を使用するか、コード自体で setTimeout() を再度呼び出すようにします。
戻り値
コードの定期的な実行をキャンセルするために Window.clearTimeout() に渡すことができる値。
setTimeout はタイマー関数なので、タイマーをクリアする関数があるので、clearTimeout 関数を使用します。
clearTimeout (setTimeout() によって返される ID 値);
2.setInterval 定義
setInterval() メソッドは、指定された期間 (ミリ秒単位) に従って関数を呼び出したり、式を計算したりできます。
setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じるまで関数を呼び出し続けます。 setInterval() によって返される ID 値は、clearInterval() メソッドの引数として使用できます。
構文
setInterval(code,millisec[,"lang"]);
パラメータコードは必須です。呼び出される関数、または実行されるコード文字列。
ミリ秒は必須です。定期的な実行またはコードの呼び出し間の時間間隔 (ミリ秒単位)
戻り値
コードの定期的な実行をキャンセルするために Window.clearInterval() に渡すことができる値。
setTimeout はタイマー関数なので、タイマーをクリアする関数があり、clearInterval() 関数を使用します。
clearInterval() (setInterval() によって返される ID 値);
例:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>倒计时效果</title> <script type="text/ecmascript"> //使用js方式实现倒计时效果 var t1; window.onload = function () { //01定位到开始按钮返回一个dom对象 var btns = document.getElementById('btnStart'); //02.给开始按钮注册单击事件 btns.onclick = function () { //执行ssetInerval函数第一个参数要定时执行的函数，第二个参数该函数每个多少毫秒执行一次 t1= setInterval(start, 1000); } //03定位到停止按钮返回一个dom对象 var btnst = document.getElementById('btnStop'); btnst.onclick = function () { clearInterval(t1); } } //要隔1秒执行的函数 function start() { //01.获取div中的文本赋值给一个变量 var divdom = document.getElementById('msg'); var divnum = divdom.innerText; //判断divnum的值是否为0 if (divnum > 0) { divnum--; //把减过的值重新赋值给divnum divdom.innerText = divnum; } } </script></head><body> <input type="button" id="btnStart" value="开始" /> <input type="button" id="btnStop" value="停止" /><br /> <div id="msg">10</div></body></html> 2.
りー