以下のコードのタイマーアプリで、今は時間が秒で設定できるようになっているのですが、時間・分でも設定できるようにしたいです。まだ整理していないので、タイマーの位置などが変ですが。
<!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にそのまま貼り付けて使用することができる実際のコード全体も教えていただきたいです。よろしくお願いいたします。
No.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;
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>
<!--
<label for="time">タイマーの長さ(秒):</label>
<input type="number" id="time" name="time" min="1" required>
-->
<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の処理能力上問題があります***
No.1
- 回答日時:
こんばんは
>タイマーの長さ(分)とタイマーの長さ(時間)のフォームを追加したいです。
入力用という意味ですよね?
簡単なのは、
<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_ …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
テキストエリア内の一部の文字...
-
jqueryで要素の中身を要素の外...
-
ダブルクォーテーションが消え...
-
ページ遷移後のcssプロパティ保持
-
5秒後にフェードイン
-
フレームのこれってどうやるの?
-
createElementで作成した要素を...
-
document.getElementById( ).st...
-
IFRAMEの表示/非表示を切り替え...
-
classの中の<a>タグにidを追加
-
ネットスケープでも動せるスク...
-
よろしくお願い致します。
-
javascriptテキストBOX色を元に...
-
removeEventListenerについて
-
jQueryで特定id以外の下にある...
-
onclickとonmouseoverを同時に...
-
取得した要素がインライン要素...
-
JSON形式のデータを古い順に3...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き function mov...
-
前回の質問の続き function mou...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
背景色を透明化
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
javascriptでオブジェクトの重...
-
タブで開いてさらにタブ内をア...
-
jQueryで特定id以外の下にある...
-
指定したパスが現URLに含まれて...
-
折りたたみ部分にアンカーでリ...
-
前回の質問の続き
-
jQueryのアコーディオンメニュ...
おすすめ情報