入力した数字でカウントダウン

前提

解決したいこと
入力した数字をカウントダウンタイマーでカウントしたいと思っています。

任意の数字を入力して、それをHTMLの「00:00」（id = timedisplay)部分に表示させ、STARTボタンを押したらそこからカウントダウンが始まるようにしたいです。

今は0秒カウントで、すぐに「TIME　UP」とされてしまいます。
javascriptの1行目で「let baseCount = 0000;」を書いているせいだとは思うのですが、ここをどうやったら任意の数字に変えられて、カウントダウンが始まる（数字の１を4回押したら11:11と認識し、そこから11分11秒がカウントダウンされる）ように設定できるのでしょうか？

ご助言いただければと思います。

冗長なコードなので見にくいかと思いますがご了承下さい。
繰り返しになっている部分（数字の3を入力したら反映するところ以降）は割愛しております。

該当のソースコード

html,javascript
1ソースコード
2```HTML
3<!DOCTYPE html>
4<html>
5    <head>
6        <title>タイマー</title>
7        <meta name="description" content="タイマーアプリ">
8        <meta charset="utf-8">
9        <body>
10            <h1><span id="timedisplay">00:00</span></h1>
11            <script src="./timer.js"></script>
12            <form>
13                <input type="button" id="number1" value="1" onclick="btnOneClick();">
14                <input type="button" id="number2" value="2" onclick="btnTwoClick();">
15                <input type="button" id="number3" value="3" onclick="btnThreeClick();"><br>
16                <input type="button" id="number4" value="4" onclick="btnFourClick();">
17                <input type="button" id="number5" value="5" onclick="btnFiveClick();">
18                <input type="button" id="number6" value="6" onclick="btnSixClick();"><br>
19                <input type="button" id="number7" value="7" onclick="btnSevenClick();">
20                <input type="button" id="number8" value="8" onclick="btnEightClick();">
21                <input type="button" id="number9" value="9" onclick="btnNineClick();"><br>
22                <input type="button" id="number0" value="0" onclick="btnZeroClick();"><br>
23                <input type="button" id="startBtn" value="START">
24                <input type="button" id="stopBtn"  value="STOP">
25                <input type="button" id="resetBtn" value="RESET">                       
26            </form>
27        </body>
28    </head>
29   </html>
30
31
32    ```javascript
33let baseCount = 0000;
34let min = 0;
35let sec = 0;
36let timerId = null;
37
38// 1秒ごとにcount_down関数呼び出す
39function count_start(){
40      baseCount = 5;
41      console.log(baseCount);
42      min = parseInt(baseCount/60);
43      sec = baseCount % 60;
44      let timedisplay = document.getElementById('timedisplay');
45      timedisplay.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
46  timerId = setInterval(count_down,1000);
47}
48// カウントダウン表示
49function count_down(){
50  if(baseCount ===0){
51    let display = document.getElementById('timedisplay');
52    display.innerText = 'TIME UP';
53  }else {
54      baseCount--;
55      min = parseInt(baseCount/60);
56      sec = baseCount % 60;
57      let count_down = document.getElementById('timedisplay');
58      count_down.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
59    }
60  }
61
62// ストップボタンクリック時のアクション
63function count_stop(){
64  clearInterval(timerId);
65}
66// リセットボタンクリック時のアクション
67function count_reset(){
68  baseCount = 0000;
69  min = parseInt(baseCount/60);
70  sec = baseCount % 60;
71  let count_down = document.getElementById('timedisplay');
72  count_down.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
73}
74// イベント処理を実行
75window.addEventListener('DOMContentLoaded', function(){
76  let start = document.getElementById('startBtn');
77  let stop  = document.getElementById('stopBtn');
78  let reset = document.getElementById('resetBtn');
79  start.addEventListener('click',count_start);
80  stop.addEventListener('click',count_stop);
81  reset.addEventListener('click',count_reset);
82})
83// 1押した時
84function btnOneClick() {
85    target = document.getElementById('timedisplay');
86    const base = target.innerText.replace(':','');
87    const newDisplay = base.substr(1,3)+ '1';
88    const a = newDisplay.slice(0,2);
89    const b = ':';
90    const c = newDisplay.slice(2);
91    let nnDisplay = a + b + c;
92    console.log(nnDisplay);
93    document.getElementById('timedisplay').textContent = nnDisplay;
94    target.innerText = nnDisplay;
95  };
96// 2を押した時（3以降は割愛）
97  function btnTwoClick() {
98    target = document.getElementById('timedisplay');
99    const base = target.innerText.replace(':','');
100    const newDisplay = base.substr(1,3)+ '2';
101    const a = newDisplay.slice(0,2);
102    const b = ':';
103    const c = newDisplay.slice(2);
104    let nnDisplay = a + b + c;
105    console.log(nnDisplay);
106    document.getElementById('timedisplay').textContent = nnDisplay;
107    target.innerText = nnDisplay;
108  };
109
110### 試したこと
111現状、「//1秒ごとにcount_down関数呼び出す」のところに5秒を無理やり入れているので、5秒のカウントダウンはしてくれます。
112でも、本当は任意の数字を入力して、それでカウントダウンを発動したいです。
113
114
115### 補足情報（FW/ツールのバージョンなど）
116
117ここにより詳細な情報を記載してください。

退会済みユーザー

2022/09/07 13:27 編集

4つ数字が入力し終わった際に表示するのですか？それとも右から詰めていく感じですか?

行動規範の内容に同意します

回答2件

何度も回答してもらってるはずですが・・・
count_start関数を以下に入れ替えれば入力した数字でカウントダウンします。

js
1function count_start(){
2      let timedisplay = document.getElementById('timedisplay');
3      [min, sec] = timedisplay.textContent.split(':');
4      baseCount = Number(min) * 60 + Number(sec);
5      timerId = setInterval(count_down,1000);
6}

投稿2022/09/07 17:48

編集2022/09/07 17:54

shiracamus

総合スコア5406

powernap

2022/09/07 21:04

お忙しい中、ご回答いただき感謝します。元々のコードを生かしたご回答でわかりやすく簡潔で助かりました。 [min, sec]という書き方は配列ということでいいのでしょうか？また、Number(min)→こういう書き方というのは何というのでしょうか？（具体的には「Number」というキーワードを定義していないのにも関わらずコードの中で使えている原理がわかりません）　調べようにもどのように調べたらいいかわからずヒントだけでも教えていただけると嬉しいです。おんぶに抱っこのように甘えて申し訳ないです。

shiracamus

2022/09/09 01:21 編集

[min, sec] は配列データをmin変数とsec変数に分割代入しています。 .split(':') によって2要素の配列ができるので、: の前が min に、: の後ろが sec に代入されます。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment Numberでは数字列を数値に変換しています。整数値なのでparseIntを使っても同じ結果になります。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt > '12:34'.split(':') [ '12', '34' ] > [min, sec] = '12:34'.split(':') [ '12', '34' ] > min '12' > sec '34' > min * 60 + sec '72034' > Number(min) 12 > Number(sec) 34 > Number(min) * 60 + Number(sec) 754

powernap

2022/09/10 01:09

ありがとうございます！お礼が遅くなり申し訳ないことでございました。ご丁寧に解説書いていただいて（例まで書いていただいたのでとても見やすいです）、本当に感謝しております。長くかかりましたが、これでやっと完成しました。

行動規範の内容に同意します

書いてみました〜
ただ、実現するために、イベントリスナを変え、それに併せて変数を変え、などしていると元のコードから相当変えてしまいました。申し訳ありません。
写す際は、htmlの数字のボタンについているonclick属性をすべて削除するとうまくいきます(jsでclickイベントリスナを登録するため。)

もしうまくいかなかったりわからない箇所があればおっしゃってください！

仕様

4つ数字を追加した時点で反映されること。
TIME UPが表示されている間でも数字を入力可能なこと。
秒数は59を超えないこと。

JavaScript
1
2  const display = document.getElementById("timedisplay");
3  let timer = "";
4  let minutes = 0;
5  let seconds = 0;
6  let cnt = null;
7
8
9  //すべての数字のボタンにclickイベントリスナを付与。
10  for (let i = 0; i < 10; i++) {
11    const btn = document.getElementById("number" + i);
12    btn.addEventListener("click", () => {
13      if (minutes + seconds === 0) { //秒数及び分が両方とも0の時のみ。
14        timer += i; // 押された数字をtimer文字列に追加。
15        if (timer.length === 4) {
16          minutes = +timer.slice(0, 2); //+演算子により文字列を数字に変換。
17          seconds = +timer.slice(2, 4); //上と同じ。
18          if (seconds > 59) seconds = 59; //秒数が59を超えていた場合は59に矯正。
19          display.textContent = minutes + ":" + seconds; //表示
20        }
21      }
22    });
23  }
24
25  function CntDown() {
26    seconds--; //秒数をひとつ小さくする
27    if (seconds < 0) { //秒数が0未満の時
28      minutes--; // 分をひとつ小さくする。
29      if (minutes >= 0) { //分が0以上の間
30        seconds = 59; //秒を59にする。
31      } else { //TIMEUPと表示させカウントをリセット。
32        CntReset();
33        display.textContent = "TIME UP!";
34        return;
35      }
36    }
37    display.textContent = minutes + ":" + seconds;
38  }
39
40  function CntStart() {
41    if (!cnt) //カウントがされていない時のみ
42      cnt = setInterval(CntDown, 1000); //1000ミリ秒(1秒)ごとに関数CntDownを実行。
43  }
44
45  function CntStop() {
46    if (cnt) { // カウントがされている時のみ。
47      clearInterval(cnt);
48      cnt = null;
49    }
50  }
51
52  function CntReset() {
53    clearInterval(cnt); //カウントをストップ。
54    cnt = null;
55
56    seconds = 0; //リセット。
57    minutes = 0;
58    timer = "";
59    display.textContent = minutes + ":" + seconds; //表示
60  }
61
62  // イベント処理を実行
63  window.addEventListener('DOMContentLoaded', function() {
64    const start = document.getElementById('startBtn');
65    const stop = document.getElementById('stopBtn');
66    const reset = document.getElementById('resetBtn');
67    start.addEventListener('click', CntStart);
68    stop.addEventListener('click', CntStop);
69    reset.addEventListener('click', CntReset);
70  });