負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit
setTimeout() 書式・説明

タイマーID = setTimeout(処理,ミリ秒)
タイマーID = window.setTimeout(処理,ミリ秒)
タイマーID = フレームオブジェクト.setTimeout(処理,ミリ秒)

指定されたミリ秒後にし指定された処理を1度だけ実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearTimeout()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です
timerID = setTimeout("myFunc()",1000);




setInterval() 書式・説明

タイマーID = setInterval(処理, ミリ秒)
タイマーID = window.setInterval(処理, ミリ秒)
タイマーID = フレームオブジェクト.setInterval(処理, ミリ秒)

指定されたミリ秒ごとに指定された処理を一定の間隔で実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearInterval()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です
timerID = setInterval("myFunc()",1000);



リアルタイムに動く時計を作ってみよう


それでは、setIntervalを使ってリアルタイムに動く時計を作ってみましょう。
サンプルの流れは次の通りです。

ページ全体の処理

ページがロードされた瞬間に

setInterval()で関数tokei()を1秒毎に実行


関数tokei()内部の処理

日時の値が入っているDateオブジェクトを生成

id = "result"を検索して、そのHTML内に日時を入れる



ソース


window.onload = function() {
timerID = setInterval("tokei()",1000);
}

function tokei() {
dt=new Date();
document.getElementById("result").innerHTML = dt + "<br>";

}

↓↓↓
<div id="result"></div>
↑↑↑
window.onload … ページをロードした瞬間に実行
setInterval() … 一定の間隔でタイマーを実行

new Date() … 日時情報が入ったDateオブジェクトを生成
getElementById() … id名を検索
innerHTML … HTMLタグをその中に記述できる要素

id="" … id名を指定。ここにタイマーが表示される。
スポンサーサイト
| ホーム |

カレンダー

09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。