Javascriptの超入門編23--タイマー活用

タイマー活用

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

■タイマーの起動と停止
JavaScriptには、指定した時間後に何らかの処理をさせたり、一定時間ごとに同じ処理を行ったりする時に便利なタイマー機能が用意されています。

・タイマーのセットは
setTimeout(コールバック関数、時間)メソッドを使ってタイマーを起動させる。

・タイマーの使用例

・スクリプト
＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
　＜style＞
　　#main {
　width: 500px;
　margin: 0 auto;
　position: relative;
}
　＜/style＞
＜/head＞

＜body＞
　＜div id="myDiv"＞
　　　　　//id属性"disp"のh1エレメントを用意し、「タイマー起動中です」を表示する。
＜h1 id="disp" style="text-align:center;"＞タイマー起動中です＜/h1＞
　＜/div＞
＜script＞
　　　　　//変数dispに、id属性＝"disp"のｈ1エレメントをエレメントオブジェクトとして取得
　var disp = document.getElementById("disp");
　　　　　//タイマー設定→setTimeout（無関数、実行時間（3秒後））
　var tId = setTimeout(function () {
disp.innerHTML = "3秒経過しました";
　}, 3000);
＜/script＞
＜/body＞

＜/html＞

■タイマー停止


＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
　＜meta charset="utf-8"＞
　＜title＞JavaScriptのテスト＜/title＞
　＜style＞
　　#main {
　width: 500px;
　margin: 0 auto;
　position: relative;
}
　＜/style＞
＜/head＞

＜body＞
＜div id="myDiv"＞
＜h1 id="disp" style="text-align:center;"＞タイマー起動中です＜/h1＞
＜/div＞

＜script＞
var disp = document.getElementById("disp");
var tId = setTimeout(function () {
disp.innerHTML = "3秒経過しました";
}, 3000);
　　//h1エレメントがクリックされたら、clearTimeout()メソッドを実行してタイマーを停止
disp.addEventListener("click", function () {
clearTimeout(tId);
disp.innerHTML = "タイマーを停止しました";
});
＜/script＞
＜/body＞

＜/html＞

■タイマーを使用して繰り返し処理する
タイマーを使用して繰り返し同じ処理を行うには、setTimeout（）メソッドを使う。



＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta＞
＜title＞JavaScriptのテスト＜/title＞
＜style＞
　　　　　　　　　//背景
#myDiv {
width: 500px;
margin: 0 auto;
position: relative;
}
//時計のスタイルシート
#disp {
text-align:center;
margin:0;
background-color: burlywood;
font-size: 100px;
font-family:"Osaka−等幅","ＭＳ ゴシック","monospace";
}
＜/style＞
＜/head＞

＜body＞
＜div id="myDiv"＞
//id属性が「disp」のPエレメントを用意
＜p id="disp"＞＜/p＞
＜/div＞
＜script＞
var tID;
　　　　　　　　　//id属性「disp」を変数dispに入れる
var disp = document.getElementById("disp");

　　　　　　　　　//clock関数
function clock() {
var now = new Date();→現在の日付を取り出す
　　　　　　　　 //日付を文字に置換える
disp.innerHTML = now.toLocaleTimeString();
// 500ミリ秒ごとに自分自身を呼び出す
tId = setTimeout(clock, 500);
}
clock();
＜/script＞
＜/body＞

＜/html＞