ストップウォッチをつくった

最近、ドットインストールで勉強しているのですが、
復習と理解の促進のために、アウトプットしておきます。

JavaScriptでストップウォッチを作ろう

作り方の手順

1. まずHTMLで骨子をつくる。
2. CSSでデザインをある程度整える。
3. JavaScriptで機能を作りこむ。

画像はつくったストップウォッチ。

下記にストップウォッチを作るのに必要な機能のメソッドをまとめておきます。

メソッド一覧

• padStart()
• setTimeout()
• clearTimeout()
• Date.now()
• Substring()
• classList.add()

padStart()

結果の文字列が指定した長さになるように延長する。
ストップウォッチの時間表示部分は00:00,000だったため、ここに使用。

001.js

     const m = String(d.getMinutes()).padStart(2,'0');
     const s = String(d.getSeconds()).padStart(2,'0');
     const ms = String(d.getMilliseconds()).padStart(3,'0');

setTimeout()

ある処理を一定時間後に実行する
下記では10m秒後にcountUp()を実行します

002.js

     timeoutId = setTimeout(() => {
         countUp();
     }, 10);

clearTimeout()

タイマーは起動すると動きっぱなしなので停止させる
setTimeout()の返り値をclearTimeout()の引数にわたす

(この部分ちゃんと理解していないので要再勉強)

002.js

 clearTimeout(timeoutId);
     }, 10);

Date.now()

規定時間からの経過時間を返す

Substring()

文字列の中の指定された範囲の部分文字列を返す

classList.add()

他にclassList.remove()やclassList.contains()など
button要素のときはdisabledプロパティを利用できた
しかしdiv要素では使えないので、クラスをつくりこのメソッドをつかう

002.js

 function setButtonStateStopped(){
    start.classList.remove('inactive');
    stop.classList.add('inactive');
    reset.classList.remove('inactive');

 }

index.html

      <div class="btn" id="start">Start</div>
      <div class="btn" id="stop">Stop</div>
      <div class="btn" id="reset">Reset</button>
 }

つくった感想

ドットインストールを使うと、１つ１つのレッスン時間が短いですし、
気軽にメソッドを網羅できるので楽チンだな～と思います。

０からプログラミングをやる人にはおすすめできないですが、
ある程度の知識があるけどWebサービスを一人で作れるレベルじゃないという人にはドットインストールがおすすめです。

（０からプログラミングをやりたい人はProgateがいいそうです。ネット情報ですが)