回答編集履歴

1

chousei

2019/10/28 14:03

投稿

yambejp
yambejp

スコア114839

test CHANGED
@@ -115,3 +115,129 @@
115
115
  </p>
116
116
 
117
117
  ```
118
+
119
+
120
+
121
+ # 分・秒の表示
122
+
123
+ ```javascript
124
+
125
+ <script>
126
+
127
+ var timerId;
128
+
129
+ var defaultTime=0;
130
+
131
+ window.addEventListener('DOMContentLoaded', ()=>{
132
+
133
+ const start=document.querySelector("#start");
134
+
135
+ const stop=document.querySelector("#stop");
136
+
137
+ const reset=document.querySelector("#reset");
138
+
139
+ const min=document.querySelector("#min");
140
+
141
+ const sec=document.querySelector("#sec");
142
+
143
+ const time=document.querySelector("#time");
144
+
145
+ start.addEventListener('click',()=>{
146
+
147
+ start.disabled=true;
148
+
149
+ stop.disabled=false;
150
+
151
+ reset.disabled=true;
152
+
153
+ timerId= setInterval(countdown=()=>{
154
+
155
+ var v=parseInt(time.value);
156
+
157
+ v--;
158
+
159
+ if(v<=0){
160
+
161
+ clearInterval(timerId);
162
+
163
+ stop.disabled=true;
164
+
165
+ reset.disabled=false;
166
+
167
+ }
168
+
169
+ time.value=v;
170
+
171
+ min.textContent=parseInt(v/60);
172
+
173
+ sec.textContent=v%60;
174
+
175
+ return countdown;
176
+
177
+ },1000);
178
+
179
+ });
180
+
181
+ stop.addEventListener('click',()=>{
182
+
183
+ clearInterval(timerId);
184
+
185
+ start.disabled=false;
186
+
187
+ stop.disabled=true;
188
+
189
+ reset.disabled=false;
190
+
191
+ });
192
+
193
+ reset.addEventListener('click',()=>{
194
+
195
+ start.disabled=false;
196
+
197
+ reset.disabled=true;
198
+
199
+ time.value=defaultTime;
200
+
201
+ min.textContent=parseInt(defaultTime/60);
202
+
203
+ sec.textContent=defaultTime%60;
204
+
205
+ });
206
+
207
+ time.addEventListener('input',()=>{
208
+
209
+ min.textContent=parseInt(time.value/60);
210
+
211
+ sec.textContent=parseInt(time.value)%60;
212
+
213
+ defaultTime=parseInt(time.value);
214
+
215
+ start.disabled=parseInt(time.value)<=0;
216
+
217
+ });
218
+
219
+ });
220
+
221
+ </script>
222
+
223
+ <p>
224
+
225
+ <span id="min">0</span> 分
226
+
227
+ <span id="sec">0</span> 秒
228
+
229
+ </p>
230
+
231
+ <p>
232
+
233
+ <input type="button" id="start" value="START" disabled>
234
+
235
+ <input type="button" id="stop" value="STOP" disabled>
236
+
237
+ <input type="button" id="reset" value="RESET" disabled>
238
+
239
+ <input type="number" id="time" min="0" max="180" value="0">
240
+
241
+ </p>
242
+
243
+ ```