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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2439閲覧

入力した時間を取得する方法

sabiki-taro

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/10/28 10:28

編集2019/10/28 11:22

前提・実現したいこと

jsで任意の時間のカウントダウンタイマーを作っています。
HTMLのナンバーインプットで計りたい時間を入力してスタートボタンを押すとその時間でカウントダウンが開始するようにしたいです。
どのように書き直せば入力した値を取得できるでしょうか。

発生している問題・エラーメッセージ

入力した時間を取得できていない模様。

該当のソースコード

html

1 <!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/style.css"> 7 <script src="js/main.js"></script> 8 9 </head> 10 11 <body> 12 <div id="timer"> 13 <h1>Timer</h1> 14 <p> 15 <span id="min">0</span>16 <span id="sec">0</span>17 </p> 18 <p> 19 <input type="button" id="start" value="START"> 20 <input type="button" id="stop" value="STOP" disabled> 21 <input type="button" id="reset" value="RESET"> 22 <input type="number" id="time"> 23 </p> 24 </div> 25 26 </body> 27</html> 28

javaScript

1 2window.onload = function(){ 3 var counter; 4 5 var start = document.getElementById("start"); 6 var stop = document.getElementById("stop"); 7 var reset = document.getElementById("reset"); 8 var min = document.getElementById("min"); 9 var sec = document.getElementById("sec"); 10 var time = document.getElementById("time"); 11 12 13 14 start.onclick = function(){ 15 time = document.getElementById("time"); 16 counter = setInterval(count,1000); 17 toggle(); 18 19 20 } 21 stop.onclick = function(){ 22 clearInterval(counter); 23 toggle(); 24 } 25 reset.onclick = function(){ 26 time = 0; 27 sec.innerHTML = time % 60; 28 min.innerHTML = Math.floor(time / 60); 29 } 30 31 32 function toggle(){ 33 if( start.disabled){ 34 start.disabled = false; 35 stop.disabled = true; 36 } else { 37 start.disabled = true; 38 stop.disabled = false; 39 } 40 } 41 42 function count() { 43 44 if( time === 0) { 45 sec.innerHTML = 0; 46 min.innerHTML = 0; 47 toggle(); 48 alert("3分経過しました。"); 49 clearInterval(counter); 50 } else { 51 time -= 1; 52 sec.innerHTML = time % 60; 53 min.innerHTML = Math.floor(time / 60); 54 } 55 } 56} 57

試したこと

time = 180 のように直接時間を入力した場合、正常に機能します。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sabiki-taro

2019/10/28 10:35

失礼しました。アドバイスありがとうございます。 修正しました。
yambejp

2019/10/28 12:22 編集

「ナンバーインプットで計りたい時間を入力」のくだりがよくわかりません 手動もしくは▲▼で入力すればいいのでしょうか? start/stop/resetの機能はどうなっているのでしょか?
sabiki-taro

2019/10/28 12:34

説明が下手ですみません。 手動等で任意の数字を設定できるようにしたいです。 start等の機能は正常に動きますが、設定した数字に関係なく-1分-1秒からカウントダウンが始まってしまいます。
guest

回答1

0

ベストアンサー

ちょっと状況がわからないのでとりあえずここから

  • timeが0より大きいときstartボタンが押せる
  • startを押すとtimeがカウントダウンして0になるととまる
  • カウントダウン中、timeが0より大きいときstopが押せ、押すとカウントがとまる
  • resetを押すと当初任意で入力した値にtimeが戻る

動作が違うようなら指示ください

javascript

1<script> 2var timerId; 3var defaultTime=0; 4window.addEventListener('DOMContentLoaded', ()=>{ 5 const start=document.querySelector("#start"); 6 const stop=document.querySelector("#stop"); 7 const reset=document.querySelector("#reset"); 8 const time=document.querySelector("#time"); 9 start.addEventListener('click',()=>{ 10 start.disabled=true; 11 stop.disabled=false; 12 reset.disabled=true; 13 timerId= setInterval(countdown=()=>{ 14 var v=parseInt(time.value); 15 v--; 16 if(v<=0){ 17 clearInterval(timerId); 18 stop.disabled=true; 19 reset.disabled=false; 20 } 21 time.value=v; 22 return countdown; 23 },1000); 24 }); 25 stop.addEventListener('click',()=>{ 26 clearInterval(timerId); 27 start.disabled=false; 28 stop.disabled=true; 29 reset.disabled=false; 30 }); 31 reset.addEventListener('click',()=>{ 32 start.disabled=false; 33 reset.disabled=true; 34 time.value=defaultTime; 35 }); 36 time.addEventListener('input',()=>{ 37 defaultTime=parseInt(time.value); 38 start.disabled=parseInt(time.value)<=0; 39 }); 40}); 41</script> 42<p> 43<input type="button" id="start" value="START" disabled> 44<input type="button" id="stop" value="STOP" disabled> 45<input type="button" id="reset" value="RESET" disabled> 46<input type="number" id="time" min="0" max="180" value="0"> 47</p>

分・秒の表示

javascript

1<script> 2var timerId; 3var defaultTime=0; 4window.addEventListener('DOMContentLoaded', ()=>{ 5 const start=document.querySelector("#start"); 6 const stop=document.querySelector("#stop"); 7 const reset=document.querySelector("#reset"); 8 const min=document.querySelector("#min"); 9 const sec=document.querySelector("#sec"); 10 const time=document.querySelector("#time"); 11 start.addEventListener('click',()=>{ 12 start.disabled=true; 13 stop.disabled=false; 14 reset.disabled=true; 15 timerId= setInterval(countdown=()=>{ 16 var v=parseInt(time.value); 17 v--; 18 if(v<=0){ 19 clearInterval(timerId); 20 stop.disabled=true; 21 reset.disabled=false; 22 } 23 time.value=v; 24 min.textContent=parseInt(v/60); 25 sec.textContent=v%60; 26 return countdown; 27 },1000); 28 }); 29 stop.addEventListener('click',()=>{ 30 clearInterval(timerId); 31 start.disabled=false; 32 stop.disabled=true; 33 reset.disabled=false; 34 }); 35 reset.addEventListener('click',()=>{ 36 start.disabled=false; 37 reset.disabled=true; 38 time.value=defaultTime; 39 min.textContent=parseInt(defaultTime/60); 40 sec.textContent=defaultTime%60; 41 }); 42 time.addEventListener('input',()=>{ 43 min.textContent=parseInt(time.value/60); 44 sec.textContent=parseInt(time.value)%60; 45 defaultTime=parseInt(time.value); 46 start.disabled=parseInt(time.value)<=0; 47 }); 48}); 49</script> 50<p> 51<span id="min">0</span>52<span id="sec">0</span>53</p> 54<p> 55<input type="button" id="start" value="START" disabled> 56<input type="button" id="stop" value="STOP" disabled> 57<input type="button" id="reset" value="RESET" disabled> 58<input type="number" id="time" min="0" max="180" value="0"> 59</p>

投稿2019/10/28 12:40

編集2019/10/28 14:03
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sabiki-taro

2019/10/28 12:57

ありがとうございます。 動作はこのようにしたいです。
sabiki-taro

2019/10/28 13:00

現在サイトCODEPREPさんの3分タイマーを任意のカウントダウンタイマーに改造しようとしているのですが…。
yambejp

2019/10/28 13:28

で、私のソースは動作すると思うのですが どこか想定と違いますか? もしそうなら具体的に指示ください。
sabiki-taro

2019/10/28 13:42

yambejpさんのソースのような動作にしたいのですが、私のソースのどこがどのように間違っているのでしょうか…。 どのようにしたら「var time」に入力した数字を反映できるのでしょうか。
sabiki-taro

2019/10/28 13:45

今のソースに手直しをして使えるものを作りたいのですが、yambejpさんのソースのように書き直しするべきなのでしょうか。
yambejp

2019/10/28 14:04

あー、min/secを表示するんでしたっけ? 追記分でどうでしょうか?
sabiki-taro

2019/10/28 15:11

あ、解決しました。 初めての質問で手間取らせてしまいすみませんでした。 回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問