Q&A
解決済
総合スコア9
投稿2020/12/09 06:51
編集2021/01/13 06:57indexhtml.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Stopwatch</title> <link rel="stylesheet" href="css/styles.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> </head> <body> <input type="text" class="text" placeholder="タスク項目"> <div id="timer" name="timer" >000:00.00</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> <select name="mintue" id = "mintue"> <option value="time_1" id="time1">30</option> <option value="time_2" id="time2">60</option> <option value="time_3" id="time3">90</option> </select> <button id="timeway">Timeway</button> <div id="sum_way" class="sum_way"> </div> <div> <ul id="timers"></ul> <button id="sum">計算</button> <input type="text" id="sum_account"> <button id="php"> php </button> </div> <div id="read_text"></div> <script src="js/main.js"></script> </body> </html> ``` ``` main.js 'use strict'; { const timeoutways = []; const timer = document.getElementById('timer'); const start = document.getElementById('start'); const stop = document.getElementById('stop'); const reset = document.getElementById('reset'); const math = document.getElementById('sum'); const minutes = document.getElementById('mintue'); const sum_account = document.getElementById('sum_account'); const timeway = document.getElementById('timeway'); const sum_way = document.getElementById('sum_way'); let startTime; let timeoutId; let elapsedTime = 0; function countUp() { const d = new Date(Date.now() - startTime + elapsedTime); const m = String(d.getMinutes()).padStart(2, '0'); const s = String(d.getSeconds()).padStart(2, '0'); const ms = String(d.getMilliseconds()).padStart(3, '0'); timer.textContent = `${m}:${s}.${ms}`; timeoutId = setTimeout(() => { countUp(); }, 10); } function setButtun () { start.disabled = false; stop.disabled = true; reset.disabled = true; } function setButtunRunning () { start.disabled = true; stop.disabled = false; reset.disabled = true; } function stopButtun () { start.disabled = false; stop.disabled = true; reset.disabled = false; } function calculateRemaining(){ const timeTxt = timer.textContent.replace(":", "").replace(".", ""); const timeresult = minutes.value; switch(timeresult) { case 'time_1': const result1 = String(3000000 - timeTxt); reguler(result1); break; case 'time_2': const result2 = String(6000000 - timeTxt); reguler(result2); break; case 'time_3': const result3 = String(9000000 - timeTxt); reguler(result3); break; } } //正規表現 function reguler(reguler) { const regulation =/(\d{2})(\d{2})(\d{3})/; const timemath = reguler.replace(regulation,'$1分$2秒$3') sum_account.value = timemath; } //途中計算 function way() { const timeTxt = timer.textContent.replace(":", "").replace(".", ""); const regulation2 =/(\d{2})(\d{2})(\d{3})/; const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3'); timeoutways.push(timemath2); sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`; }; // ajax 処理 $(function() { $('#php').click(function(){ const timeTxt = timer.textContent.replace(":", "").replace(".", ""); const data = { 'timeattack':timeTxt, } console.log() $("#read_text").load('more.php?timeattack=$(timeTxt)'); }); }); setButtun(); start.addEventListener('click', () => { setButtunRunning(); startTime = Date.now(); countUp(); }); stop.addEventListener('click', () => { stopButtun(); clearTimeout(timeoutId); elapsedTime += Date.now()-startTime; }); reset.addEventListener('click', () => { setButtun(); timer.textContent = '000:00.000'; elapsedTime = 0; }); math.addEventListener('click', () => { stop.click(); calculateRemaining(); }) timeway.addEventListener('click',() =>{ way(); }) } ``` ``` more.php <?php header('Content-type: text/plain; charset= UTF-8'); if(isset($_GET['timeattack'] )){ $timer =$_GET['timeattack']; echo $timer; }else { echo 'こんにちわ'; } ``` 実行したいこと ajaxを使ってphpで時間の表示をechoなど使い表示をする 現状ストップウォッチの時間や計算後の時間を表示したいが値が取れず困っています。 何か解決手段のアドバイスをお願いします。 背景としては今の時間管理ツールは一つのタスクしか時間を表示できないため、他のタスクが来たときに新しく時間管理ができるようにする 例：Aタスク発生→途中の時間の表示を一旦DBやtextに格納→新たにBタスクを開始→Bタスクを終了→途中のAタスクを開始 という流れをしたいです
回答2件
0
}).done(function() {
Ajax成功時に何も受け取ってません。
リファレンスにもある通り、doneでは様々な返却値があり、
その中に呼び出したURLの処理結果も含まれます。
deferred.done()
通常は下記のように受け取ります（調べればこの手の受け取り方を紹介している記事は沢山出てきます。
js
1}).done(function(data, textStatus, xhr){ 2
なお、返却値は実行時のdataTypeと実行先URLでのレスポンスヘッダーによりますので、それによってコールバックの処理を考えてください。（結局はどう使いたいか次第）
投稿2020/12/09 07:48
総合スコア80892
0
自己解決
main.js
1 2'use strict'; 3{ 4 5 const timeoutways = []; 6 7 const timer = document.getElementById('timer'); 8 const start = document.getElementById('start'); 9 const stop = document.getElementById('stop'); 10 const reset = document.getElementById('reset'); 11 const math = document.getElementById('sum'); 12 const minutes = document.getElementById('mintue'); 13 const sum_account = document.getElementById('sum_account'); 14 const timeway = document.getElementById('timeway'); 15 const sum_way = document.getElementById('sum_way'); 16 const textcontent = document.getElementById('textcontent'); 17 18 19 20 21 let startTime; 22 let timeoutId; 23 let elapsedTime = 0; 24 25 function countUp() { 26 const d = new Date(Date.now() - startTime + elapsedTime); 27 const m = String(d.getMinutes()).padStart(2, '0'); 28 const s = String(d.getSeconds()).padStart(2, '0'); 29 const ms = String(d.getMilliseconds()).padStart(3, '0'); 30 timer.textContent = `${m}:${s}.${ms}`; 31 timeoutId = setTimeout(() => { 32 countUp(); 33 }, 10); 34 } 35 36 function setButtun () { 37 start.disabled = false; 38 stop.disabled = true; 39 reset.disabled = true; 40 } 41 42 function setButtunRunning () { 43 start.disabled = true; 44 stop.disabled = false; 45 reset.disabled = true; 46 } 47 48 function stopButtun () { 49 start.disabled = false; 50 stop.disabled = true; 51 reset.disabled = false; 52 } 53 54 function calculateRemaining(){ 55 const timeTxt = timer.textContent.replace(":", "").replace(".", ""); 56 const timeresult = minutes.value; 57 switch(timeresult) { 58 case 'time_1': 59 const result1 = String(3000000 - timeTxt); 60 reguler(result1); 61 break; 62 case 'time_2': 63 const result2 = String(6000000 - timeTxt); 64 reguler(result2); 65 66 break; 67 case 'time_3': 68 const result3 = String(9000000 - timeTxt); 69 reguler(result3); 70 break; 71 } 72 73 } 74 //正規表現 75 function reguler(reguler) { 76 const regulation =/(\d{2})(\d{2})(\d{3})/; 77 const timemath = reguler.replace(regulation,'$1分$2秒$3') 78 sum_account.value = timemath; 79 } 80 81 //途中計算 82 function way() { 83 const timeTxt = timer.textContent.replace(":", "").replace(".", ""); 84 const regulation2 =/(\d{2})(\d{2})(\d{3})/; 85 const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3'); 86 87 timeoutways.push(timemath2); 88 sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`; 89 90 }; 91 92 93 // ajax 処理 94 $(function() { 95 96 $('#php').click(function(){ 97 const textcontent = document.getElementById('textcontent'); 98 99 const timeTxt = timer.textContent.replace(":", "").replace(".", ""); 100 const timeresult = minutes.value; 101 102 const regulation2 =/(\d{2})(\d{2})(\d{3})/; 103 const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3'); 104 timeoutways.push(timemath2); 105 106 sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`; 107 const data = { 108 'timeattack':timeTxt, 109 'timemath2':timemath2, 110 } 111 $.ajax({ 112 url:"more.php", 113 type:"post", 114 dataType:"text", 115 data:data, 116 }).done(function() { 117 console.log(textcontent); 118 textcontent.reset(); 119 }).fail(function() { 120 alert("not"); 121 $("#read_text").load('less.php'); 122 123 }); 124 }); 125 }); 126 127// $(function() { 128// $('phpreturn').click(function() { 129// $("#read_text").load('less.php'); 130// }) 131// }) 132 133 134 135 setButtun(); 136 137 138 start.addEventListener('click', () => { 139 setButtunRunning(); 140 startTime = Date.now(); 141 countUp(); 142 }); 143 144 stop.addEventListener('click', () => { 145 stopButtun(); 146 clearTimeout(timeoutId); 147 elapsedTime += Date.now()-startTime; 148 }); 149 150 reset.addEventListener('click', () => { 151 setButtun(); 152 timer.textContent = '000:00.000'; 153 elapsedTime = 0; 154 }); 155 156 math.addEventListener('click', () => { 157 stop.click(); 158 calculateRemaining(); 159 }) 160 161 timeway.addEventListener('click',() =>{ 162 way(); 163 164 }) 165} 166
more.php
1<?php 2 3 $array = [$_POST['timeattack']."\n",$_POST['timemath2']]; 4 5 6 $data = "data.txt"; 7 file_put_contents($data,$array,FILE_APPEND); 8
以前はajaxでmore.php 値を送る際に、成功時にphpを2重に読み込んでいたので、値が受け取れていなかった
現在はphpで$_POST['timeattack']に値を受け取り、別ファイルに記述している実装ができた。
投稿2021/02/18 06:26
総合スコア9
あなたの回答
tips
プレビュー
