JavaScriptでストップウォッチを作る

2019/06/25

この記事を書いている人 - WRITER -

サラリーマンエンジニアです。平成３１年４月１日から1日当たり100円を FX口座に積立てて令和元年の初日から自作プログラムによるシステムトレードをしています。プログラミングを基礎から学習しつつ効率的な自動売買ロジックを考えて、副収入で月給を超えることを目標にコツコツ頑張ります。

今回のミニアプリはストップウォッチです。機能は単純で、startボタンでカウントアップしてstopボタンで停止。resetボタンで0に戻すというものです。

段々模写だけでは理解が難しくなってきた。何かオリジナルのアプリを作ることを考えねば成長が鈍りそうです。

【完成版のソースコード】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Stopwatch</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div id="timer">00:00.000</div>
    <div class="controls">
      <div class="btn" id="start">Start</div>
      <div class="btn" id="stop">Stop</div>
      <div class="btn" id="reset">Reset</div>
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Stopwatch</title>

</head>

<body>

<div class="btn" id="start">Start</div>

<div class="btn" id="reset">Reset</div>

</div>

</body>

</html>

body {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background: #eee;
}

.container {
  margin: 20px auto;
  width: 270px;
  background: #fff;
  padding: 15px;
  text-align: center;
}

#timer {
  background: #ddd;
  height: 120px;
  line-height: 120px;
  font-size: 40px;
  margin-bottom: 15px;
}

.btn {
  width: 80px;
  height: 45px;
  line-height: 45px;
  background: #ddd;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.controls {
  display: flex;
  justify-content: space-between;
}

.inactive {
  opacity: 0.6;
}

body {

font-family: 'Courier New', monospace;

font-size: 14px;

background: #eee;

}

.container {

margin: 20px auto;

width: 270px;

background: #fff;

padding: 15px;

text-align: center;

}

#timer {

background: #ddd;

height: 120px;

line-height: 120px;

font-size: 40px;

margin-bottom: 15px;

}

.btn {

width: 80px;

height: 45px;

line-height: 45px;

background: #ddd;

font-weight: bold;

cursor: pointer;

user-select: none;

}

.controls {

display: flex;

justify-content: space-between;

}

.inactive {

opacity: 0.6;

}

'use strict';

{
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');

  let startTime;
  let timeoutId;
  let elapsedTime = 0;

  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = d.getMinutes();
    const s = d.getSeconds();
    const ms = d.getMilliseconds();
    timer.textContent = `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`;

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

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

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

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

  setButtonStateInitial();

  start.addEventListener('click', () => {
    if (start.classList.contains('inactive') === true) {
      return;
    }
    setButtonStateRunning();
    startTime = Date.now();
    countUp();
  });

  stop.addEventListener('click', () => {
    if (stop.classList.contains('inactive') === true) {
      return;
    }
    setButtonStateStopped();
    clearTimeout(timeoutId);
    elapsedTime += Date.now() - startTime;
  });

  reset.addEventListener('click', () => {
    if (reset.classList.contains('inactive') === true) {
      return;
    }
    setButtonStateInitial();
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });
}

'use strict';

{

const timer = document.getElementById('timer');

const start = document.getElementById('start');

const stop = document.getElementById('stop');

const reset = document.getElementById('reset');

let startTime;

let timeoutId;

let elapsedTime = 0;

function countUp() {

const d = new Date(Date.now() - startTime + elapsedTime);

const m = d.getMinutes();

const s = d.getSeconds();

const ms = d.getMilliseconds();

timer.textContent = `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`;

timeoutId = setTimeout(() => {

countUp();

}, 10);

}

function setButtonStateInitial() {

start.classList.remove('inactive');

stop.classList.add('inactive');

reset.classList.add('inactive');

}

function setButtonStateRunning() {

start.classList.add('inactive');

stop.classList.remove('inactive');

reset.classList.add('inactive');

}

function setButtonStateStopped() {

start.classList.remove('inactive');

stop.classList.add('inactive');

reset.classList.remove('inactive');

}

setButtonStateInitial();

start.addEventListener('click', () => {

if (start.classList.contains('inactive') === true) {

return;

}

setButtonStateRunning();

startTime = Date.now();

countUp();

});

stop.addEventListener('click', () => {

if (stop.classList.contains('inactive') === true) {

return;

}

setButtonStateStopped();

clearTimeout(timeoutId);

elapsedTime += Date.now() - startTime;

});

reset.addEventListener('click', () => {

if (reset.classList.contains('inactive') === true) {

return;

}

setButtonStateInitial();

timer.textContent = '00:00.000';

elapsedTime = 0;

});

}

この記事を書いている人 - WRITER -

mukuchan

JavaScriptでストップウォッチを作る

関連記事 - Related Posts -

仮想通貨の自動売買もPython

新規注文が見送りばかり

python学習コースII完了

Ruby、Pythonの初級編の復習完了

最新記事 - New Posts -

旧取引ツールサービス終了のお知らせ

オリンピックボランティア研修

課長の代行

即位のパレード

- Comments - コメントをキャンセル

JavaScriptでストップウォッチを作る

共有:

関連記事 - Related Posts -

最新記事 - New Posts -

- Comments - コメントをキャンセル