減算タイマーの設置

\r\n

\r\n\r\n\r\n```\r\n```JavaScript\r\nvar node_clock, node_etime, node_e2time,s_2,tim,tim_2,tim_3,tim_4,curr;\r\nvar count = 0;\r\nwindow.onload = function() {\r\n\tnode_e2time = document.getElementById('e2time');\r\n\tnode_e2time.style.fontSize ='10em';\r\n\tnode_e2time.innerHTML = '00'+':'+'01'+':'+'00';\r\n\tdocument.getElementById('s_2').onclick = function(){via();}\r\n};\r\nfunction via(){\r\n tim = new Date();\r\ncount++;\r\n\ttim_3 = setTimeout(function(){put_time2(node_e2time)},1000);\r\n}\r\nfunction put_time2(node){\r\n\tcurr = new Date();\r\n\ttim_4 = setInterval('put_time2(node_e2time)', 1000);\t\t//タイマーの生成\t\t\t\t\t\t\r\n var e = Math.floor((curr -tim ) /1000); //curr - timで1秒を作成\r\n\tvar ss =60 - (e % 60);\t\t\t\t\r\n\tvar mm = 1;\t\t\t\t\t\t\t\t\t\r\n\r\n\tif (ss <= 10)\r\n\t{\r\n\t\tnode.style.color = 'red';\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnode.style.color = '#000000';\r\n\t}\r\n\tif(count == 60){//countを使い60になったら終わらす\r\n\t node.innerHTML = two_digit(0)+':'+two_digit(0)+':'+two_digit(ss);\r\n\t\tsetTimeout(function(){node.innerHTML = two_digit(0)+':'+two_digit(0)+':'+two_digit(0);},1000);//０秒が足りないので追加\r\n\t\tclearInterval(tim_4);//タイマーtim_4を削除\r\n\t}\r\n\telse{\r\n\t\tnode.innerHTML = two_digit(hh)+':'+two_digit(0)+':'+two_digit(ss);\r\n\t}\t\t\r\n\t\r\n}\r\nfunction two_digit(d){//先頭に0をつけるだけの関数\r\n\tif (d < 10) return '0'+d;\r\n\treturn d;\r\n}\r\n```\r\n\r\n\r\n\r\n### 試したこと\r\n最初は、clearIntervalではなくtwo_digit(0)+':'+two_digit(0)+':'+two_digit(0);で0:0:0を表示させようとしました。\r\nそれだと、タイマーが動いているのでループしてしまうと気付きました。\r\nその後、タイマーを止めるために秒数(ss)で条件分けをしていましたが、それだと不適切だと気付いたのでcountを使おうと考えました。\r\n\r\n\r\n### 補足情報（FW/ツールのバージョンなど）","answerCount":1,"upvoteCount":0,"datePublished":"2018-06-25T09:50:18.177Z","dateModified":"2018-06-25T09:50:18.177Z","acceptedAnswer":{"@type":"Answer","text":"必要な処理はこんな感じ\r\n\r\n- タイマー処理でループする\r\n- デクリメントする（カウントダウン）\r\n- 表示する文字をフォーマットする\r\n- 表示する\r\n- 特定の条件で色をかえる\r\n= 特定の条件でタイマーを止める\r\n\r\n```javascript\r\n\r\n

減算タイマーの設置

\r\n

\r\n\r\n```","dateModified":"2018-06-25T11:03:55.271Z","datePublished":"2018-06-25T11:03:55.271Z","upvoteCount":1,"url":"https://teratail.com/questions/132903#reply-201514"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}

回答率: 85.29%

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

トップ JavaScriptに関する質問

Q&A

解決済

1回答

703閲覧

カウントダウンタイマー

sakuranamiki

総合スコア9

0グッド

1クリップ

投稿2018/06/25 09:50

前提・実現したいこと

学校の課題でカウントダウンのタイマーを作っています。
カウントは00：01：00から始まり、00：00：00で終了します。
10秒以下になると文字を赤色に変更するまでが課題です。
JavaScriptは、今月から習い始めたので知識はほとんどありません。

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

エラーメッセージは出ないのですが、タイマーが00：00：00で終了しません。
無限ループしてしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" type="text/css" href="ch10.css">
6<script src="ch0010.js"></script>
7<title>課題10</title>
8</head>
9<body>
10<h1>課題10</h1>
11<h2>減算タイマーの設置</h2>
12<div id="co">
13<div id="e2time"></div>
14<div><input type="submit" value="Start" id="s_2"/></div>
15</body>
16</html>

JavaScript
1var node_clock, node_etime, node_e2time,s_2,tim,tim_2,tim_3,tim_4,curr;
2var count = 0;
3window.onload = function() {
4	node_e2time = document.getElementById('e2time');
5	node_e2time.style.fontSize ='10em';
6	node_e2time.innerHTML = '00'+':'+'01'+':'+'00';
7	document.getElementById('s_2').onclick = function(){via();}
8};
9function via(){
10    tim = new Date();
11count++;
12	tim_3 = setTimeout(function(){put_time2(node_e2time)},1000);
13}
14function put_time2(node){
15	curr = new Date();
16	tim_4 = setInterval('put_time2(node_e2time)', 1000);		//タイマーの生成						
17    var e = Math.floor((curr -tim ) /1000);  //curr - timで1秒を作成
18	var ss =60 - (e % 60);				
19	var mm = 1;									
20
21	if (ss <= 10)
22	{
23		node.style.color = 'red';
24	}
25	else
26	{
27		node.style.color = '#000000';
28	}
29	if(count == 60){//countを使い60になったら終わらす
30	    node.innerHTML = two_digit(0)+':'+two_digit(0)+':'+two_digit(ss);
31		setTimeout(function(){node.innerHTML = two_digit(0)+':'+two_digit(0)+':'+two_digit(0);},1000);//０秒が足りないので追加
32		clearInterval(tim_4);//タイマーtim_4を削除
33	}
34	else{
35		node.innerHTML = two_digit(hh)+':'+two_digit(0)+':'+two_digit(ss);
36	}		
37	
38}
39function two_digit(d){//先頭に0をつけるだけの関数
40	if (d < 10) return '0'+d;
41	return d;
42}

試したこと

最初は、clearIntervalではなくtwo_digit(0)+':'+two_digit(0)+':'+two_digit(0);で0:0:0を表示させようとしました。
それだと、タイマーが動いているのでループしてしまうと気付きました。
その後、タイマーを止めるために秒数(ss)で条件分けをしていましたが、それだと不適切だと気付いたのでcountを使おうと考えました。

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

行動規範の内容に同意します

回答1件

ベストアンサー

必要な処理はこんな感じ

タイマー処理でループする
デクリメントする（カウントダウン）
表示する文字をフォーマットする
表示する
特定の条件で色をかえる
= 特定の条件でタイマーを止める

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#s_2').addEventListener('click',function(e){
4    var sec=60;
5    var target=document.querySelector('#e2time');
6    target.style.color='black';
7    target.textContent=format_hhmmss(sec);
8    var timerId=setInterval(function(){
9      sec--;
10      target.textContent=format_hhmmss(sec);
11      if(sec<=10) target.style.color='red';
12      if(sec<=0) clearInterval(timerId);
13    },1000);
14  });
15});
16function format_hhmmss(sec){
17  var h=parseInt(sec/3600);
18  var m=parseInt(sec%3600/60);
19  var s=sec%60;
20  return ("0"+h).substr(-2)+":"+("0"+m).substr(-2)+":"+("0"+s).substr(-2);
21}
22</script>
23<h2>減算タイマーの設置</h2>
24<div id="e2time"></div>
25<div><input type="submit" value="Start" id="s_2"/></div>
26