× 無料のユーザー登録をすると学習状況を管理することができるようになります

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト

【旧版】JavaScriptで作るストップウォッチ (全3回)

最新版のレッスンはこちらから » 【最新版】JavaScriptでストップウォッチを作ろう (全13回)

定番ですが、JavaScriptでストップウォッチを作ってみます。

#02 スタートボタンの実装
2013年9月9日

補足情報 より正確なストップウォッチにするには？

このレッスンでは簡単のため setInterval を利用して 100 ミリ秒ごとに 0.1 足すという処理にしていますが、正確なストップウォッチと比較すると時間がずれます。

これを回避するには、0.1 足す代わりに new Date().getTime() で時刻(ミリ秒)を取得し、start時の時刻との差を取るといいでしょう。

(ユーザーの方よりアドバイスいただきました。)
#03 ストップ/リセットボタンの実装
2012年2月6日

補足情報 さらに改良してみましょう

今回のストップウォッチはさらに以下のような改良をおこなうことができます。

* 1.0秒、2.0秒などの時に「.0」が表示されるようにする。
* 動作中にstartボタンを複数回クリックしてもタイマーが加速しないようにする。
* 前回のレッスン補足情報で説明した、 new Date().getTime() を使ってみる。

余裕があったら他にも色々と改良してみてください。