タイマー活用
【開発環境】
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＞
