fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. 	<title>Document</title>
  8. 	<style type="text/css">
  9. 	<!--
  10. 		body
  11. 		{
  12. 			font-size: 16px;
  13. 		}
  14. 		div#container
  15. 		{
  16. 			margin:0 10%;
  17. 			border:2px solid gray;
  18. 		}
  19. 		div#display
  20. 		{
  21. 			padding:0.5em 0;/*親要素の文字サイズを基準としてpaddingを設定*/
  22. 			text-align: center;
  23. 			font-size:5em;
  24. 			/*等幅フォントにしないとtimerの表示がずれる*/
  25. 			font-family: "メイリオ",monospace !important;
  26. 		}
  27. 		div#lap_display
  28. 		{
  29. 			font-size:2em;
  30. 			background-color:silver;
  31. 			height:400px;
  32. 			overflow: scroll;
  33. 		}
  34.  
  35. 		div#button_wrapper
  36. 		{
  37. 			border:1px solid gray;
  38. 			text-align: center;
  39.  
  40. 		}
  41. 		div#button_wrapper button
  42. 		{
  43. 			font-size: 3em;
  44. 		}
  45. 		button#lap:disabled,button#reset:disabled
  46. 		{
  47. 			background-color: #ededed;
  48. 			color:silver;
  49. 		}
  50. 	-->
  51. 	</style>
  52. </head>
  53. <body>
  54.  
  55.  
  56. <div id="container">
  57. 	<div id="display"></div>
  58. 	<div id="button_wrapper">
  59. 		<button id="start">
  60.  
  61. 		</button>
  62. 		<button id="lap">
  63. 			ラップタイム
  64. 		</button>
  65. 		<button id="reset">
  66. 			リセット
  67. 		</button>
  68. 	</div>
  69. 	<div id="lap_display">
  70. 	</div>     
  71. </div>
  72.  
  73. 	<script>
  74. 	//html要素の取得
  75. 	let startButton = document.getElementById("start");
  76. 	let resetButton = document.getElementById("reset");
  77. 	let lapButton = document.getElementById("lap");
  78. 	let testButton = document.getElementById("test");
  79.  
  80. 	let display = document.getElementById("display");
  81. 	let lap_display = document.getElementById("lap_display");
  82.  
  83. 	//lapボタンの初期値セット
  84. 	lapButton.setAttribute("disabled" , true);
  85. 	let lapNumber = 0;
  86.  
  87. 	//スイッチ用のモード
  88. 	let mode = "stop";
  89. 	let interval_1;
  90.  
  91. 	let startTime;
  92. 	let accumTime = 0;//累積時間
  93. 	let display_ms = 0;
  94.  
  95. 	//タイマーの初期値をセット
  96. 	let timeTemplate = "00:00:00:000";
  97. 	//display.textcontentへのprevious_accumTimeのセット
  98. 	display.textContent = localStrageDefaultValueSet();
  99.  
  100. 	//ボタンの内容物をトグルする
  101. 	let startButtonTemplate_start = "スタート";
  102. 	let startButtonTemplate_stop = "ストップ";
  103. 	//ボタンのデフォルトテキストをセットする
  104. 	startButton.textContent = startButtonTemplate_start;
  105.  
  106. 	//ラップタイム用の配列
  107. 	//let laptime_arr = [];
  108.  
  109. startButton.addEventListener("click" , function()
  110. {
  111. 	switch(mode)
  112. 	{
  113. 		case "stop":
  114. 			mode = "run";
  115. 			startButton.textContent = startButtonTemplate_stop;
  116. 			resetButton.setAttribute("disabled" ,  true);
  117. 			lapButton.removeAttribute("disabled");
  118. 			//ここで開始時刻を取得
  119. 			startTime = Date.now();
  120. 			interval_1 = setInterval(update ,30);
  121. 			//ローカルストレージから初期値、あるいは前回終了時の累積値を取り出す
  122. 			accumTime = Number(localStorage.getItem("previous_accumTime"));
  123. 			break;
  124. 		case "run":
  125. 			startButton.textContent = startButtonTemplate_start;
  126. 			mode_and_interval_stop();
  127. 			// #region comment
  128. 				//let textContent_of_timer = Number(display.textContent);//タイマーを止めた時点でのdisplay.textContentを保存しておく
  129. 				//accumTime += Date.now() - startTime;//タイマーを止めた時点での累積時間
  130. 				//タイマーを止めた時点でのaccumTimeをupdate関数内から取り出す
  131. 				//取り出したdisplay_msをaccumTimeに代入することで、次のスタート時点は途中から加算される
  132. 			// #endregion
  133. 			accumTime = display_ms;
  134.  
  135. 			//ローカルストレージに今現在の累積時間を保存
  136. 			localStorage.setItem("previous_accumTime" , accumTime);
  137. 			break; 
  138. 	}
  139. });
  140.  
  141. //タイマーをリセット
  142. resetButton.addEventListener("click" , function()
  143. {
  144.  
  145. 	display_ms  = 0;
  146. 	accumTime = 0;
  147. 	display.textContent = timeTemplate;
  148.  
  149. 	startButton.removeAttribute("disabled");
  150. 	//lap関係のリセット
  151. 	lapNumber = 0;
  152. 	lap_display.innerHTML = "";
  153. 	//localStorageのリセット
  154. 	localStorage.setItem("previous_accumTime" , 0);
  155.  
  156. });
  157.  
  158. lapButton.addEventListener("click" , function()
  159. {
  160. 	lapNumber += 1;
  161. 	let lap_display_inner = "<span>LAP" + lapNumber + "    :    " + display.textContent + "</span><br>";
  162. 	let lap_time = lap_display.insertAdjacentHTML("afterbegin" ,lap_display_inner );
  163. 	/*
  164. 	//クリックごとにlaptimeをlocalstrageに保存しておく
  165. 	laptime_arr.push(lap_display_inner);
  166. 	localStorage.setItem("setLapTime" , JSON.stringify(laptime_arr));
  167. 	*/
  168.  
  169. });
  170.  
  171.  
  172.  
  173. function update()
  174. {
  175. 	// #region comment
  176. 		//timerに表示
  177. 		// 0 + (1500ms - 1000ms)//60msごとにDate.now()が増えていく
  178. 		//以下のようにaccumTimeにupdate内で加算すると、60ms(setIntervalの設定値)ごとにが加算されてしまうので、stop時に加算する
  179. 		//accumTime += (Date.now() - startTime);
  180. 		//1000 +=1000 + (1500 - 1000) = 1500
  181. 		// 1500 += 1500 +(1600 - 1000)  2100
  182. 		//2100 += 2100 + (1700 - 1000) = 2800
  183. 		//update内で加算すると、増え幅が雪だるま式になる
  184. 	// #endregion
  185. 	display_ms =  accumTime + (Date.now() - startTime);
  186. 	display.textContent = ms_converter(display_ms);
  187.  
  188.  
  189.  
  190. 	//タイマーのカウントが24時間を超えたら止める
  191. 	if(display_ms > 86400000)
  192. 	{
  193. 		mode_and_interval_stop();
  194. 		startButton.setAttribute("disabled" ,  true);
  195. 		alert(display_ms);
  196. 	}
  197.  
  198. }	
  199.  
  200. //msをストップウォッチの形式に変換
  201. function ms_converter(ms)
  202. {
  203. 	const date = new Date(ms);
  204. 		return `${("0" + Math.floor(date/3600000)).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}:${("0" + date.getSeconds()).slice(-2)}:${("0" + date.getMilliseconds()).slice(-3)
  205. 	}` ;
  206.  
  207. }
  208.  
  209. function mode_and_interval_stop()
  210. {
  211. 	clearInterval(interval_1);
  212. 	mode = "stop";
  213. 	//リセットボタン無効化
  214. 	resetButton.removeAttribute("disabled" , true);
  215. 	//ラップボタン有効化
  216. 	lapButton.setAttribute("disabled" , true);
  217. }
  218.  
  219. //ローカルストレージのデフォルト値をセット
  220. function localStrageDefaultValueSet()
  221. {
  222. 	//newしてないとgetSecondsなどの関数は使えない
  223. 	let localStrageDate = new Date(Number(localStorage.getItem("previous_accumTime")));
  224. 	return ms_converter(localStrageDate);
  225. }
  226.  
  227. /*
  228. //ラップタイムの保存とリストア
  229. function set_laptime_from_localstrage()
  230. {
  231. 	let date = JSON.parse(localStorage.getItem("setLapTime"));
  232.  
  233. 	for(let i = 0;i < date.length ; i++)
  234. 	{
  235. 		lap_display.innerHTML +=  date[i];
  236. 	}
  237. }
  238. */
  239.  
  240. </script>
  241.  
  242.  
  243. </body>
  244. </html>
Runtime error #stdin #stdout #stderr 0.49s 43252KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
js: "prog.js", line 111: syntax error
js: 	switch(mode)
js: .......^
js: "prog.js", line 113: syntax error
js: 		case "stop":
js: ......^
js: "prog.js", line 114: syntax error
js: 			mode = "run";
js: .........^
js: "prog.js", line 123: unlabelled break must be inside loop or switch
js: 			break;
js: ........^
js: "prog.js", line 124: syntax error
js: 		case "run":
js: ......^
js: "prog.js", line 125: syntax error
js: 			startButton.textContent = startButtonTemplate_start;
js: ...............^
js: "prog.js", line 137: unlabelled break must be inside loop or switch
js: 			break; 
js: ........^
js: "prog.js", line 138: syntax error
js: 	}
js: .^
js: "prog.js", line 139: syntax error
js: });
js: .^
js: "prog.js", line 204: illegal character: `
js: 		return `${("0" + Math.floor(date/3600000)).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}:${("0" + date.getSeconds()).slice(-2)}:${("0" + date.getMilliseconds()).slice(-3)
js: .........^
js: "prog.js", line 204: missing } after function body
js: 		return `${("0" + Math.floor(date/3600000)).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}:${("0" + date.getSeconds()).slice(-2)}:${("0" + date.getMilliseconds()).slice(-3)
js: .........^
js: "prog.js", line 1: Compilation produced 11 syntax errors.
https://ideone.com/O5tsDV
language:
JavaScript (rhino 1.7.9)
created:
2 years ago
visibility:
secret

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!