JavaScriptを使った10秒ちょうどで止めるやつを作った

　プログラミング初心者なので、とりあえずフロントエンドからやろうということで、本を参考にしながら何か作ってみました。
最初はネットにある情報だけでなんとかしようとしたけど全然ダメで、やっぱり本は買うべきだなーと感じました。

参考文献

これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん

　まだ最後らへんはやってないですけど、めちゃくちゃ良書だと感じました。他の本をやっていないため比較することはできませんが、気になっていたBootstrapやjQuery、Vue.jsまで入っているのでお得感あります。

開発環境

Windows 10 Home
Visual Studio Code 1.44.2
Google Chrome

コード

HTML

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>10秒ピッタリで止めるやつ</title>
  <link type="text/css" rel="stylesheet" href="style.css">
  <script type="text/javascript" src="10seconds.js"></script>
</head>
<body>
  <div class="container">
    <p id="timer">00:00</p>

    <button id="button" class="start" onclick="clicked(this)">START</button>

    <p id="comment"></p>

  </div>
</body>
</html>

　HTMLに関しては、どういう機能があるかとかはだいたい理解できた気がします。ただ、一般的にどう使うかみたいなのはまだ全然分からないので、どんどん作っていくしかないかなと思います。

CSS

style.css

.container{
  text-align: center;
  max-width: 600px;
  margin: 50px auto;
}

#timer{
  background-color: black;
  color: rgb(16, 245, 46);
  font-size: 128px;
  margin: 0 auto;
  width: 600px;
}

#button{
  margin-top: 30px;
  font-size: 64px;
  width: 600px;
  color: white;
  text-align: center;
  border: solid white;
}

#comment{
  font-size: 64px;
  color: black;
  text-align: center;
}

.start{
  background-color: rgba(0, 119, 255, 0.651);
}

.stop{
  background-color: rgba(255, 0, 0, 0.87);
}

.reset{
  background-color: rgba(0, 255, 21, 0.87);
}

　これも一応ルールとかについては理解できましたが、まだまだ知らないことが多すぎるので、これは知識を増やすことが必要かなって感じですね。

JavaScript

10seconds.js

//グローバル変数の宣言
var start;
var display;
var timer_id;
var milli;

//keta関数
//桁合わせをする関数
function keta(value)
{
  //値が10より小さい場合
  if(value < 10)
  {
    //桁合わせをするために0を追加
    value = '0' + value;
  }
  return value;
}

//check関数
//タイマー表示のための関数
function check()
{
  //Dateオブジェクトの生成
  var count = new Date();
  //1970年1月1日からの経過時間をミり秒単位で取得
  milli = count.getTime();

  //時間差を計算
  milli -= start;
  //1/1000を整数で表示するため、10で割り、1/100秒単位をmilliに入れる
  milli = Math.floor(milli/10);
  //milliを100で割り、1秒単位を計算し、secondに入れる
  var second = Math.floor(milli/100);
  //milliが0~99以外の値を取らないようにする

  //表示する文字列を作るdisplay
  display = keta(second) + ':' + keta(milli - second * 100);

  //タイマーに表示する
  document.getElementById('timer').innerHTML = display;
}

//clicked関数
//クリックされたときに実行される
function clicked(ele)
{
  //ボタンの文字がSTARTのとき
  if(ele.innerHTML === 'START')
  {
    //Dateオブジェクトの生成
    var now = new Date();
    //1970年1月1日からの経過時間をミり秒単位で取得
    start = now.getTime();

    //0.01(10/1000)秒ごとにcheck()関数を実行
    timer_id = setInterval(check,10);

    //ボタンの文字をSTOPにする
    ele.innerHTML = 'STOP';
    //classからstartを外す
    ele.classList.remove('start');
    //classにstopを加える
    ele.classList.add('stop');
  }
  //ボタンの文字をSTOPのとき
  else if(ele.innerHTML === 'STOP')
  {
    //タイマーを止める
    clearInterval(timer_id);
    document.getElementById('timer').innerHTML = display;

    //符号用の変数
    var sign;
    //差を計算
    var diff = milli - 1000;
    //符号を調べる
    if(diff > 0)
      sign = '+';
    else
      sign = '-'
    //時間差を計算する
    document.getElementById('comment').innerHTML = sign + keta(Math.floor(Math.abs(diff)/100)) + ':' + keta(Math.floor(Math.abs(diff)%100));

    //ボタンの文字をRESETにする
    ele.innerHTML = 'RESET';
    //classからstopを外す
    ele.classList.remove('stop');
    //classにresetを加える
    ele.classList.add('reset');
  }
  else
  {
    //タイマーをリセット
    document.getElementById('timer').innerHTML = '00:00';
    //時間差の表示を消す
    document.getElementById('comment').innerHTML = null;

    //ボタンの文字をSTARTにする
    ele.innerHTML = 'START';
    //classからresetを外す
    ele.classList.remove('reset');
    //classにstartを加える
    ele.classList.add('start');
  }
}

　一応C、C++についての基礎知識があったので、関数とかif文とかについてはすんなり理解できました。ただ、グローバル変数をかなり多く使ってしまったり、計算式が分かりづらかったりしたのはもう少し改善できたのかなって感じがします。

感想と反省

　本に書いてあったのは普通のタイマーだけだったので、ボタンの切り替えなんかは自分で考えてやってみたので、もしかしたら変なことをしているのかもしれません。もっと他の人のコードを見て勉強しようと思います。
　結構時間をかけてしまったので、もっとスピーディにやっていこうと思いました。