秒表失败
[英]Second stop watch is failing
问题描述
我正在尝试制作一个简单的页面，其中装有8个秒表，第二个秒表无法正常工作，我似乎无法弄清楚，有什么想法吗？ 第一个脚本可以正常工作，但是第二个脚本在我开始启动时会给我一秒钟的时间，然后我可以暂停并恢复并获得另一秒钟的时间。 在我看来不错，但我对此还很陌生。
var time = 0; var running = 0; function startPause() { if(running == 0){ running = 1; increment(); document.getElementById("startPause").innerHTML = "Pause"; }else{ running = 0; document.getElementById("startPause").innerHTML = "Resume"; } } function reset() { running = 0; time = 0; document.getElementById("startPause").innerHTML = "Start"; document.getElementById("output").innerHTML = "00:00:00"; } function increment() { if(running == 1){ setTimeout(function(){ time++; var mins = Math.floor(time/10/60); var secs = Math.floor(time/10 % 60); var tenths = time % 10; if(mins < 10){ mins = "0" + mins; } if(secs < 10){ secs = "0" + secs; } document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths; increment(); },100); } } var time2 = 0; var running2 = 0; function startPause2() { if(running2 == 0){ running2 = 1; increment2(); document.getElementById("startPause2").innerHTML = "Pause"; } else{ running2 = 0; document.getElementById("startPause2").innerHTML = "Resume"; } } function reset2() { running2 = 0; time2 = 0; document.getElementById("startPause2").innerHTML = "Start"; document.getElementById("output2").innerHTML = "00:00:00"; } function increment2() { if(running2 == 1){ setTimeout(function(){ time2++; var mins2 = Math.floor(time2/10/60); var secs2 = Math.floor(time2/10 % 60); var tenths2 = time2 % 10; if(mins2 < 10){ mins2 = "0" + mins2; } if(secs2 < 10){ secs2 = "0" + secs2; } document.getElementById("output2").innerHTML = mins2 + ":" + secs2 + ":" + "0" + tenths2; increment(); },100); } }
html { size: 100%,100%; background-color: #f2f2f2; } h1{ font-Family: Arial; color: #5573A9; font-size: 40px; position: static; } body { display: block; margin:8px, dotted line; background-color: #f2f2f2; } #output{ position:center; width:120px; height:25px; background-color:#CCC; border:3px solid #999; } #output2{ position: relative; width:120px; height:25px; background-color:#CCC; border:3px solid #999; } table { display:table; border-collapse:seperate; border-spacing: 52px; border-color: #FFF; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Time Study</title> <h1>Time Study</h1> </head> <body> <table> <tr> <th>Bin</th> <th>Bulk</th> </tr> <tr> <td> <p id="output"></p> <div id="controls"> <button id="startPause" onclick="startPause()">Start</button> <button onclick="reset()">Reset</button> </div> </td> <td> <p id="output2"></p> <div id="controls2"> <button id="startPause2" onclick="startPause2()">Start</button> <button onclick="reset2()">Reset</button> </div> </td> </tr> </table> </body> </html>
1 个解决方案
解决方案1
2 2016-10-27 13:38:55
快速的答案是：
对于第二个计时器，当您需要调用increasing2（）时，您正在调用increment（） 。
更长的答案是：
这指出了您尝试解决此问题的方式中的一个缺陷。 如果您最终想要8个计时器，那将是一团糟。
您要做的就是尝试解决该问题，以便大多数代码都可以重用，而不是复制。 如果您需要帮助，请告诉我。
在下面的JS中寻找我的评论以获取修复。
var time = 0; var running = 0; function startPause() { if (running == 0) { running = 1; increment(); document.getElementById("startPause").innerHTML = "Pause"; } else { running = 0; document.getElementById("startPause").innerHTML = "Resume"; } } function reset() { running = 0; time = 0; document.getElementById("startPause").innerHTML = "Start"; document.getElementById("output").innerHTML = "00:00:00"; } function increment() { if (running == 1) { setTimeout(function() { time++; var mins = Math.floor(time / 10 / 60); var secs = Math.floor(time / 10 % 60); var tenths = time % 10; if (mins < 10) { mins = "0" + mins; } if (secs < 10) { secs = "0" + secs; } document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths; increment(); }, 100); } } var time2 = 0; var running2 = 0; function startPause2() { if (running2 == 0) { running2 = 1; increment2(); document.getElementById("startPause2").innerHTML = "Pause"; } else { running2 = 0; document.getElementById("startPause2").innerHTML = "Resume"; } } function reset2() { running2 = 0; time2 = 0; document.getElementById("startPause2").innerHTML = "Start"; document.getElementById("output2").innerHTML = "00:00:00"; } function increment2() { if (running2 == 1) { setTimeout(function() { time2++; var mins2 = Math.floor(time2 / 10 / 60); var secs2 = Math.floor(time2 / 10 % 60); var tenths2 = time2 % 10; if (mins2 < 10) { mins2 = "0" + mins2; } if (secs2 < 10) { secs2 = "0" + secs2; } document.getElementById("output2").innerHTML = mins2 + ":" + secs2 + ":" + "0" + tenths2; /// =============================== /// This is your fix /// =============================== // increment(); increment2(); /// =============================== }, 100); } }
html { size: 100%, 100%; background-color: #f2f2f2; } h1 { font-Family: Arial; color: #5573A9; font-size: 40px; position: static; } body { display: block; margin: 8px, dotted line; background-color: #f2f2f2; } #output { position: center; width: 120px; height: 25px; background-color: #CCC; border: 3px solid #999; } #output2 { position: relative; width: 120px; height: 25px; background-color: #CCC; border: 3px solid #999; } table { display: table; border-collapse: seperate; border-spacing: 52px; border-color: #FFF; }
<table> <tr> <th>Bin</th> <th>Bulk</th> </tr> <tr> <td> <p id="output"></p> <div id="controls"> <button id="startPause" onclick="startPause()">Start</button> <button onclick="reset()">Reset</button> </div> </td> <td> <p id="output2"></p> <div id="controls2"> <button id="startPause2" onclick="startPause2()">Start</button> <button onclick="reset2()">Reset</button> </div> </td> </tr> </table>
第二次更改对象时如何停止$ watch
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.