【ストップウォッチ】1秒ちょうどで止めるやつ。

javascript
Man holds in his hand a sports stopwatch. Time management concept. Fast reaction business abstract picture. Vector illustration.

Javascriptの練習として、ストップウォッチを作りました。

https://saburi314.github.io/stopWatchJustOne/

Date.now() - startTime

現在時刻 – スタートボタンを押した時間 = 経過時間

で経過時間を割り出す形で再現しました。

難しかった点

1秒が何ミリ秒かを復習するところから始まりました…。

※1秒=1000ミリ秒(1×10の3乗)

また、setTimeoutやclearTimeoutも全然使っていなかったので、使い方を忘れていました。

ある程度見たらすぐに思い出しますが、まだまだ記憶に定着していないようです。

 clearTimeoutには引数として、setTimeoutの戻り値を設定しないといけないので、そこも忘れていてエラーが出ました。
 
だいぶ前にも同じエラーが出て、同じことを調べた気がします…。

追加機能

ただのストップウォッチだけだと寂しいので、ちょっとした機能を追加しました。

ストップウォッチを00:01.000で止めると、ご褒美の画像が見られます。(大したものではないです)

子供のころに遊んだ、ストップウォッチを1秒ちょうどで止めるやつを思い出して実装してみました。

1.000の桁まで判断するので、判定はなかなかシビアです。

githubに載せました。

https://saburi314.github.io/stopWatchJustOne/

コメント

  1. コメントありがとうございます!

    おっしゃる通りですね。
    マウスのクリック時間を考慮できていませんでした。

    まだまだ改善の余地ありです。

  2. ジャストで止める、というシビアなタイミングを競うのであれば、ボタン押下のイベントは離したタイミングで発火するclickではなく、押した瞬間に発火するmousedownや、スマホであればtouchstart等を使うべきでしょう。
    手動では、押したボタンを離すまでは、どんなに早くても1/100秒程度はかかるものです。

タイトルとURLをコピーしました