teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

chousei

2019/10/28 14:03

投稿

yambejp
yambejp

スコア117885

answer CHANGED
@@ -56,4 +56,67 @@
56
56
  <input type="button" id="reset" value="RESET" disabled>
57
57
  <input type="number" id="time" min="0" max="180" value="0">
58
58
  </p>
59
+ ```
60
+
61
+ # 分・秒の表示
62
+ ```javascript
63
+ <script>
64
+ var timerId;
65
+ var defaultTime=0;
66
+ window.addEventListener('DOMContentLoaded', ()=>{
67
+ const start=document.querySelector("#start");
68
+ const stop=document.querySelector("#stop");
69
+ const reset=document.querySelector("#reset");
70
+ const min=document.querySelector("#min");
71
+ const sec=document.querySelector("#sec");
72
+ const time=document.querySelector("#time");
73
+ start.addEventListener('click',()=>{
74
+ start.disabled=true;
75
+ stop.disabled=false;
76
+ reset.disabled=true;
77
+ timerId= setInterval(countdown=()=>{
78
+ var v=parseInt(time.value);
79
+ v--;
80
+ if(v<=0){
81
+ clearInterval(timerId);
82
+ stop.disabled=true;
83
+ reset.disabled=false;
84
+ }
85
+ time.value=v;
86
+ min.textContent=parseInt(v/60);
87
+ sec.textContent=v%60;
88
+ return countdown;
89
+ },1000);
90
+ });
91
+ stop.addEventListener('click',()=>{
92
+ clearInterval(timerId);
93
+ start.disabled=false;
94
+ stop.disabled=true;
95
+ reset.disabled=false;
96
+ });
97
+ reset.addEventListener('click',()=>{
98
+ start.disabled=false;
99
+ reset.disabled=true;
100
+ time.value=defaultTime;
101
+ min.textContent=parseInt(defaultTime/60);
102
+ sec.textContent=defaultTime%60;
103
+ });
104
+ time.addEventListener('input',()=>{
105
+ min.textContent=parseInt(time.value/60);
106
+ sec.textContent=parseInt(time.value)%60;
107
+ defaultTime=parseInt(time.value);
108
+ start.disabled=parseInt(time.value)<=0;
109
+ });
110
+ });
111
+ </script>
112
+ <p>
113
+ <span id="min">0</span> 分
114
+ <span id="sec">0</span> 秒
115
+ </p>
116
+ <p>
117
+ <input type="button" id="start" value="START" disabled>
118
+ <input type="button" id="stop" value="STOP" disabled>
119
+ <input type="button" id="reset" value="RESET" disabled>
120
+ <input type="number" id="time" min="0" max="180" value="0">
121
+ </p>
59
122
  ```