java script でストップウォッチ
スタート
ストップ
リセットボタン
を作成
表示は div で作成
id=”set”
style=”fong size:120px”>0.0</div>
用はボタンの onclick=”関数”
として<script> のところにそれぞれの関数を記述しておけばOK
簡単に
setinterval を使って百ミリ秒ごとに0.1 足しているけど
正確なストップウオッチに比べると時間がずれる
これを回避するには0.1 足すのではなく
new Date().getTime() で
ミリ秒を取得し、start の時刻との差を取る用にする
setInterval(function(){
sec +=0.1;
document.getElementById(“set”).innerHTML=sec;
},100);
だけだとたまに変になる
一旦１０倍にして四捨五入するようにして
1/10 にすればいい
round() は
四捨五入する関数
なので
setInterval(function(){
sec +=0.1;
document.getElementById(“set”).innerHTML=sec;
},100);
を
sec から
Math.round(sec*10)/10;
とすれば、見た目もすっきりする
こうしないと凄い桁数になっている
次にストップとリセット作成
var timerid ;
で宣言しておいて
function start() のところの
setInterval(function(){
を
timerId = setInterval(function(){
にする
あとは
function stop(){
clearInterval(timerid);
}
これでOK
次にリセット
function reset(){
document.getElementById(‘sec’).innerHTML=’0.0′;
sec =0.0;
}
とすればOK
innerHTML=’0.0′;
で表示を
0.0
に置き換えて
sec =0.0;
とすることで数値も初期化している