fc2ブログ

java script でストップウォッチ

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);
だけだとたまに変になる

一旦10倍にして四捨五入するようにして
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;
とすることで数値も初期化している
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック