質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

表示時間の計算を行いたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 183

kobayashi.j

score 6

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Stopwatch</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <div id="timer">00:00.000</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>

  <select name="mintus">
    <option value="time_1">30</option>
    <option value="time_2">60</option>
    <option value="time_3">90</option>
  </select>
  <div>
    <button id="sum">計算</button>
    <input type-text id="sum_account">
  </div>

  <script src="main.js"></script>
</body>
</html>
main.js


'use strict';

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

  let startTime;
  let timeoutId;
  let elapsedTime = 0;

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

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

  function setButtonStateInitial() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }

  function setButtonStateRunning() {
    start.disabled = true;
    stop.disabled = false;
    reset.disabled = true;
  }

  function setButtonStateStopped() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = false;
  }

  setButtonStateInitial();

  start.addEventListener('click', () => {
    setButtonStateRunning();
    startTime = Date.now();
    countUp();
  });

  stop.addEventListener('click', () => {
    setButtonStateStopped();
    clearTimeout(timeoutId);
    elapsedTime += Date.now() - startTime;
  });

  reset.addEventListener('click', () => {
    setButtonStateInitial();
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });

 math.addEventListener('click',() => {
  var fact = timer.getTime() - mintus.getTime();
  fact();
  console.log(fact);

})

}

実現したいこと

bodyのtimerの時間とselecteの値を選択した値の計算をし、その値をだす

試したこと
const math = document.getElementById('sum');
const mintus = document.getElementById('mintus');と変数に起き

var fact = timer.getTime() - mintus.getTime();
timerの値とselectの値を取得するmintusの差を表示する

補足情報(FW/ツールのバージョンなど)
言語 JavaScript  sql sequel pro
コード VScode

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2020/08/04 16:48

    >bodyのtimerの時間とselecteの値を選択した値の計算をし、その値をだす

    ごめんなさい。日本語として意味がわかりません。
    結局何をどうしたいのでしょうか?具体的にお願いします

    キャンセル

  • kobayashi.j

    2020/08/04 16:52

    ストップヲッチで示した値と目標時間(select部分)の差を計算したい
    こちらでなんとなく分かりましたでしょうか?

    キャンセル

  • yambejp

    2020/08/04 16:58 編集

    startをおすとカウントアップがはじまり、stopでとめる?
    selectの秒数との差をだす?
    カウントアップしてれば秒数が見えるので
    差はさほどでないのでは?

    キャンセル

  • kobayashi.j

    2020/08/04 17:03

    秒数は見れます 業務の目標とした時間と実際にかかった時間の差を表示したいのですが無理なのでしょうか?

    キャンセル

回答 1

checkベストアンサー

0

とりあえず勉強がてら書いてみました。
html部分も若干変更有ります。
Javascriptは初心者の自分が書いたため色々と突っこみどころ満載だと思います。
(秒を分に変換してなかったりとか、コードの可読性などなど)

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Stopwatch</title>

</head>

<body>
    <div id="timer">00:00.000</div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>

    <select id="minutes">
        <option value="time_1">30</option>
        <option value="time_2">60</option>
        <option value="time_3">90</option>
    </select>
    <div>
        <button id="sum">計算</button>
        <input type="text" id="sum_account">
    </div>

    <script>
        'use strict';

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

            let startTime;
            let timeoutId;
            let elapsedTime = 0;

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

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

            function setButtonStateInitial() {
                start.disabled = false;
                stop.disabled = true;
                reset.disabled = true;
            }

            function setButtonStateRunning() {
                start.disabled = true;
                stop.disabled = false;
                reset.disabled = true;
            }

            function setButtonStateStopped() {
                start.disabled = false;
                stop.disabled = true;
                reset.disabled = false;
            }

            setButtonStateInitial();

            start.addEventListener('click', () => {
                setButtonStateRunning();
                startTime = Date.now();
                countUp();
            });

            stop.addEventListener('click', () => {
                setButtonStateStopped();
                clearTimeout(timeoutId);
                elapsedTime += Date.now() - startTime;
            });

            reset.addEventListener('click', () => {
                setButtonStateInitial();
                timer.textContent = '00:00.000';
                elapsedTime = 0;
            });

// 以下追加アリ

            math.addEventListener('click', () => {
                stop.click();
                const timeTxt = timer.textContent.replace(":", "").replace(".", "");
                const select = document.getElementsByTagName("select");
                switch (minutes.value) {
                    case "time_1":
                        result(timeTxt - 30000);
                        break;
                    case "time_2":
                        result(timeTxt - 60000);
                        break;
                    case "time_3":
                        result(timeTxt - 130000);
                        break;
                }
            })
        }

        const result = (time) => {
            if (String(time).slice(0, 1) === "-") {
                const answer = String(time).replace("-", "");
                const timeLen = answer.length;
                if (timeLen < 6) {
                    document.getElementById("sum_account").value = "-" + answer.slice(0, timeLen - 3) + "." + answer.slice(timeLen - 3);
                } else if (timeLen > 6) {
                    document.getElementById("sum_account").value = "-" + answer.slice(0, 1) + ":" + answer.slice(1, timeLen - 3) + "." + answer.slice(timeLen - 3)
                }
            }
            const answer = String(time);
            const timeLen = answer.length;
            document.getElementById("sum_account").value = answer.slice(0, timeLen - 3) + "." + answer.slice(timeLen - 3);
        }

    </script>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/04 18:43

    ありがとうござます。参考にしてみます

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る