HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない

解決済

質問者：優里さん
質問日時：2023/12/18 18:12
回答数：2件

以下のコードのタイマーアプリで、今は時間が秒で設定できるようになっているのですが、時間・分でも設定できるようにしたいです。まだ整理していないので、タイマーの位置などが変ですが。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タイマーアプリ</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

label {
font-size: 24px;
margin-bottom: 16px;
}

input {
font-size: 24px;
padding: 8px;
margin-bottom: 16px;
text-align: center;
}

button {
font-size: 24px;
padding: 8px 16px;
margin: 8px;
}

#display {
font-size: 48px;
margin-bottom: 16px;
}
</style>
</head>
<body>
<form>
<label for="time">タイマーの長さ（秒）:</label>
<input type="number" id="time" name="time" min="1" required>
<button id="start" onclick="startTimer(event)">スタート</button>
<button id="pause" onclick="pauseTimer(event)">一時停止</button>
<button id="reset" onclick="resetTimer()">リセット</button>
</form>

<div id="display">0:00</div>

<script>
let timeLeft = 0;
let timerId = null;
let pausedTime = 0;

function startTimer(event) {
event.preventDefault();
if (timerId !== null) {
return;
}
/*** ↓↓↓この辺を変えた↓↓↓ ***/
// timeLeft = parseInt(document.getElementById("time").value);
if (pausedTime == 0) {
timeLeft = parseInt(document.getElementById("time").value);
} else {
timeLeft = pausedTime
}
/*** ↑↑↑この辺を変えた↑↑↑ ***/

timerId = setInterval(() => {
timeLeft--;
if (timeLeft === 0) {
clearInterval(timerId);
timerId = null;
//playSound();
}
updateDisplay();
}, 1000);
}

function pauseTimer(event) {
event.preventDefault();
if (timerId !== null) {
clearInterval(timerId);
timerId = null;
pausedTime = timeLeft;
document.getElementById("pause").textContent = "再開";
} else {
timeLeft = pausedTime;
startTimer(event);
document.getElementById("pause").textContent = "一時停止";
}
}

function resetTimer() {
if (confirm("本当にリセットしますか？")) {
clearInterval(timerId);
timerId = null;
timeLeft = 0;
pausedTime = 0;
updateDisplay();
}
}

function updateDisplay() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
document.getElementById("display").textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

function playSound() {
const audio = new Audio("timer.mp3");
audio.loop = true;
audio.play();
}
</script>
</body>
</html>

このアプリにタイマーの長さ（分）とタイマーの長さ（時間）のフォームを追加したいです。時間/分/秒のどれか一つだけの入力でも動作するようにしたいです。さらに、減っていくところ（物理タイマーなら液晶）も、時間：分：秒の表示ができるようにしたいです。「ミリ秒を表示する」というチェックボックスがあって、それにチェックが入っているときは時間：分：秒：ミリ秒と表示されるようにしたいです。できればindex.htmlにそのまま貼り付けて使用することができる実際のコード全体も教えていただきたいです。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： gura_
回答日時：2023/12/24 10:13

優里さん

･････時間・分でも設定できるようにしたい･･･････

ご参考↓

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タイマーアプリ</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

label {
font-size: 24px;
margin-bottom: 16px;
}

input {
font-size: 24px;
padding: 8px;
margin-bottom: 16px;
text-align: center;
width: 60px;
}

button {
font-size: 24px;
padding: 8px 16px;
margin: 8px;
}

#display {
font-size: 48px;
margin-bottom: 16px;
}
</style>
</head>
<body>
<p>秒未満の表示処理に問題有り</p>
<form>
<div id="display">0:00.0</div>

<div>
<input type="number" id="sHour" value="0">時
<input type="number" id="sMin" max="59" value="0">分
<input type="number" id="sSec" max="59" value="1">秒
</div>

<button id="start" onclick="startTimer(event)">スタート</button>
<button id="pause" onclick="pauseTimer(event)">一時停止</button>
<button id="reset" onclick="resetTimer()">リセット</button>
</form>

<script>
let timeLeft = 0;
let timerId = null;
let pausedTime = 0;

function startTimer(event) {
event.preventDefault();
if (timerId !== null) {
return;
}

/*** ↓↓↓この辺を変えた↓↓↓
// timeLeft = parseInt(document.getElementById("time").value);
if (pausedTime == 0) {
timeLeft = parseInt(document.getElementById("time").value);
} else {
timeLeft = pausedTime
}
/*** ↑↑↑この辺を変えた↑↑↑ ***/
if (pausedTime == 0) {
timeLeft = parseInt(document.getElementById("sHour").value) * 3600
+ parseInt(document.getElementById("sMin").value) * 60
+ parseInt(document.getElementById("sSec").value);
} else {
timeLeft = pausedTime
}

timerId = setInterval(() => {
// timeLeft--;
timeLeft -= 0.1;
if (timeLeft <= 0.1) {
clearInterval(timerId);
timerId = null;
//playSound();
}
updateDisplay();
}, 100);
}

function pauseTimer(event) {
event.preventDefault();
if (timerId !== null) {
clearInterval(timerId);
timerId = null;
pausedTime = timeLeft;
document.getElementById("pause").textContent = "再開";
} else {
timeLeft = pausedTime;
startTimer(event);
document.getElementById("pause").textContent = "一時停止";
}
}

function resetTimer() {
if (confirm("本当にリセットしますか？")) {
clearInterval(timerId);
timerId = null;
timeLeft = 0;
pausedTime = 0;
updateDisplay();
}
}

function updateDisplay() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
// document.getElementById("display").textContent = `${minutes}:${seconds.toString(1).padStart(2, "0")}`;
document.getElementById("display").textContent = `${minutes}:${('0'+seconds.toFixed(1)).slice(-4)}`;
}

function playSound() {
const audio = new Audio("timer.mp3");
audio.loop = true;
audio.play();
}
</script>
</body>
</html>

***なお、そもそもこの秒未満の時計表示は、PCの処理能力上問題があります***

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2023/12/18 19:11

こんばんは

＞タイマーの長さ（分）とタイマーの長さ（時間）のフォームを追加したいです。
入力用という意味ですよね？

簡単なのは、
　<input type="time" name="hoge" step="1">
のような既存のタイプを利用する方法でしょうか。
ただし、UIはブラウザ依存になります。

現状の、type="number"を2つ（または3つ）利用して、（時）、分、秒に分けて入力する方式にしても可能でしょう。
それらが気に入らなくて、独自のUIにしたければ1から自作するとかですね。

＞時間：分：秒：ミリ秒と表示されるようにしたいです。
前回の質問にも書きましたが・・・
https://oshiete.goo.ne.jp/qa/13681958.html
setInterval の間隔依存の時間計測では、ミリ秒単位は誤差が大きすぎるでしょう。
PCの時刻を元に計算するようにすれば、基本的に時刻はミリ秒単位で取得できますので、分・秒と同様の方法で表示することが可能です。
（ミリ秒を計算すれば良いだけ）

とはいえ、多くのディスプレイのフレームレートは17ミリ秒程度ですので、ミリ秒単位の表示にはほとんど意味が無いと言えるかも知れません。
（1/10秒表示程度がいいところで、1/100秒表示が限界でしょう）

＞できればindex.htmlにそのまま貼り付けて使用することができる
＞実際のコード全体も教えていただきたいです。
「なんでも良いから欲しいだけ」と言うのであれば、検索して探した方が速いです。
（以下はごく一例です）
https://jp-seemore.com/web/4071/#toc7
https://note.affi-sapo-sv.com/js-make-stopwatch_ …