入力した数字をカウントダウンタイマーでカウント
Q&A
Closed
解決したいこと
入力した数字をカウントダウンタイマーでカウントしたいと思っています。
任意の数字を入力して、それをHTMLの「00:00」（id = timedisplay)部分に表示させ、STARTボタンを押したらそこからカウントダウンが始まるようにしたいです。
今は0秒カウントで、すぐに「TIME UP」とされてしまいます。
javascriptの1行目で「let baseCount = 0000;」を書いているせいだとは思うのですが、ここをどうやったら任意の数字に変えられて、カウントダウンが始まる（数字の１を4回押したら11:11と認識し、そこから11分11秒がカウントダウンされる）ように設定できるのでしょうか？
ご助言いただければと思います。
冗長なコードなので見にくいかと思いますがご了承下さい。
繰り返しになっている部分（数字の3を入力したら反映するところ以降）は割愛しております。
追加で「業界的にはここはこうするよ」とか「今のトレンドはこう書くよ」などの情報ありましたら教えていただけると嬉しいです。
該当するソースコード
ソースコードを入力
```HTML
<!DOCTYPE html>
<html>
<head>
<title>タイマー</title>
<meta name="description" content="タイマーアプリ">
<meta charset="utf-8">
<body>
<h1><span id="timedisplay">00:00</span></h1>
<script src="./timer.js"></script>
<form>
<input type="button" id="number1" value="1" onclick="btnOneClick();">
<input type="button" id="number2" value="2" onclick="btnTwoClick();">
<input type="button" id="number3" value="3" onclick="btnThreeClick();"><br>
<input type="button" id="number4" value="4" onclick="btnFourClick();">
<input type="button" id="number5" value="5" onclick="btnFiveClick();">
<input type="button" id="number6" value="6" onclick="btnSixClick();"><br>
<input type="button" id="number7" value="7" onclick="btnSevenClick();">
<input type="button" id="number8" value="8" onclick="btnEightClick();">
<input type="button" id="number9" value="9" onclick="btnNineClick();"><br>
<input type="button" id="number0" value="0" onclick="btnZeroClick();"><br>
<input type="button" id="startBtn" value="START">
<input type="button" id="stopBtn" value="STOP">
<input type="button" id="resetBtn" value="RESET">
</form>
</body>
</head>
</html>
```javascript
let baseCount = 0000;
let min = 0;
let sec = 0;
let timerId = null;
// 1秒ごとにcount_down関数呼び出す
function count_start(){
baseCount = 5;
console.log(baseCount);
min = parseInt(baseCount/60);
sec = baseCount % 60;
let timedisplay = document.getElementById('timedisplay');
timedisplay.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
timerId = setInterval(count_down,1000);
}
// カウントダウン表示
function count_down(){
if(baseCount ===0){
let display = document.getElementById('timedisplay');
display.innerText = 'TIME UP';
}else {
baseCount--;
min = parseInt(baseCount/60);
sec = baseCount % 60;
let count_down = document.getElementById('timedisplay');
count_down.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
}
}
// ストップボタンクリック時のアクション
function count_stop(){
clearInterval(timerId);
}
// リセットボタンクリック時のアクション
function count_reset(){
baseCount = 0000;
min = parseInt(baseCount/60);
sec = baseCount % 60;
let count_down = document.getElementById('timedisplay');
count_down.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
}
// イベント処理を実行
window.addEventListener('DOMContentLoaded', function(){
let start = document.getElementById('startBtn');
let stop = document.getElementById('stopBtn');
let reset = document.getElementById('resetBtn');
start.addEventListener('click',count_start);
stop.addEventListener('click',count_stop);
reset.addEventListener('click',count_reset);
})
// 1押した時
function btnOneClick() {
target = document.getElementById('timedisplay');
const base = target.innerText.replace(':','');
const newDisplay = base.substr(1,3)+ '1';
const a = newDisplay.slice(0,2);
const b = ':';
const c = newDisplay.slice(2);
let nnDisplay = a + b + c;
console.log(nnDisplay);
document.getElementById('timedisplay').textContent = nnDisplay;
target.innerText = nnDisplay;
};
// 2を押した時（3以降は割愛）
function btnTwoClick() {
target = document.getElementById('timedisplay');
const base = target.innerText.replace(':','');
const newDisplay = base.substr(1,3)+ '2';
const a = newDisplay.slice(0,2);
const b = ':';
const c = newDisplay.slice(2);
let nnDisplay = a + b + c;
console.log(nnDisplay);
document.getElementById('timedisplay').textContent = nnDisplay;
target.innerText = nnDisplay;
};
自分で試したこと
現状、「//1秒ごとにcount_down関数呼び出す」のところに5秒を無理やり入れているので、5秒のカウントダウンはしてくれます。
でも、本当は任意の数字を入力して、それでカウントダウンを発動したいです。
0
