８．時間
10秒間のカウントダウンタイマーを作ってください。
タイマーは、1秒ずつ更新してください。
前回と同様にまず onload を使い関数を呼び出す。
表示部分の500には特に意味はない。
<body OnLoad="countdown();" >
<div id="timelimit">500</div>
</body>
var num = 10;
function countdown(){
var T = document.getElementById("timelimit");
T.innerHTML = num;
if (num > 0){
num--;
window.setTimeout("countdown()", 1000);
}
}
num はどこで呼び出された countdown でも同一の変数となるように関数の外部、上位で宣言する。
T に関しては num と同様に外部で宣言するとうまく動かないようなので countdown の内部で宣言した。
なぜ外部で宣言すると動かないのかはよくわからなかった。
その後に下の形に修正。
var num = 10;
function countdown(){
(document.getElementById("timelimit")).innerHTML = num;
if (num > 0){
num--;
window.setTimeout("countdown()", 1000);
}
}
何度も使う必要がない限り T の宣言はそもそも必要ではなかった。
また複数のオブジェクトに対して何度も操作を行う場合はそれぞれに対応する変数を宣言するよりも getElementById をより簡易に行える関数を用意した方が楽なように思える。
ただし処理速度としては変数を宣言してオブジェクトに対応させておく方が何度も読み込む必要がなく速いのかもしれない。
