使用Javascript Stopwatch遇到問題

我正在使用秒錶，這是我的代碼。這對我來說非常合理，但不想因某種原因更新。使用Javascript Stopwatch遇到問題

HTML：

 <ul> 

      <li id="hour">0</li> 
      <li>:</li> 
      <li id="min">0</li> 
      <li>:</li> 
      <li id="sec">0</li> 

     </ul>

JS：

var sec = document.getElementById("sec").value, 
     min = document.getElementById("min").value, 
     hour = document.getElementById("hour").value; 

     function stopWatch(){ 
      sec++; 
      if(sec > 59) { 
      sec = 0; 
      min++; 
      } else if(min > 59){ 
      min = 0; 
      hour++; 
      } 

      window.setTimeout("stopWatch()", 1000); 

     } 

     stopWatch();

來源

2013-07-16 Matthew

時間不是無序列表。如果您要標記時間讀數的各個部分，請在''元素中使用''。 – zzzzBov

(function() { 

     var sec = document.getElementById("sec").value, 
     min = document.getElementById("min").value, 
     hour = document.getElementById("hour").value; 



     function stopWatch(){ 
      sec++; 
      if(sec > 59) { 
       sec = 0; 
       min++; 
      } else if(min > 59){ 
       min = 0; 
       hour++; 
      } 
      document.getElementById("sec").textContent = sec 
      document.getElementById("min").textContent = min 
      document.getElementById("hour").textContent = hour 
      window.setTimeout(stopWatch, 1000); 
     } 

     stopWatch(); 
    })();

來源

2013-07-16 18:53:23 Stefan

謝謝你，這工作得很好！ – Matthew

1）列表項LI沒有價值，他們的innerHTML。

var sec = document.getElementById("sec").innerHTML;（不.value的）

2）在任何地方你的代碼你設置您的LIS內容。 JavaScript不會神奇地將ID與變量相關聯 - 你必須自己做一點。

如：

document.getElementById("hour").innerHTML = hour;

3）從來沒有過超時爲字符串。可以使用匿名函數：

window.setTimeout(function() {stopWatch()}, 1000);

，或者說白了：

window.setTimeout(stopWatch, 1000);

來源

2013-07-16 18:46:52

啊，我明白了。感謝您解釋我的錯誤。 – Matthew

此外 - JavaScript計時器不是很準確。請參閱：http://stackoverflow.com/questions/2696692/setinterval-vs-settimeout –

列表項沒有.value財產。輸入或textareas有。它應該是

var sec = parseInt(document.getElementById("sec").innerHTML, 10), 
    min = parseInt(document.getElementById("min").innerHTML, 10), 
    hour = parseInt(document.getElementById("hour").innerHTML, 10);

它也將它們解析爲數字。

此外，請勿將字符串傳遞給setTimeout。通過你想要調用的函數：

window.setTimeout(stopWatch, 1000);

而你的代碼中沒有任何地方輸出更新的變量。它們不是指向DOM屬性的魔術指針，只是保存數字（或原始腳本中的字符串）。

最後但並非最不重要的是您的代碼中存在邏輯錯誤。您正在檢查分鐘是否超過59，只有秒沒有。在if之前刪除那個else。

來源

2013-07-16 18:47:06 Bergi

調用只應

window.setInterval(stopWatch, 1000);

因此，要使用秒錶，把裏面的功能：

var sec = 0, min = 0, hour = 0; 
window.setInterval(function() { 
    "use strict"; 
    sec++; 
    if (sec > 59) { 
     sec = 0; 
     min++; 
    } else if (min > 59) { 
     min = 0; 
     hour++; 
    } 
    document.getElementById("sec").innerHTML = sec; 
    document.getElementById("min").innerHTML = hour; 
    document.getElementById("hour").innerHTML = hour; 
}, 1000);

來源

2013-07-16 18:49:45 Brian

謝謝你，這工作很好。 ;） – Matthew

李元素沒有價值propertie，使用innerHTML。您可以將sec，min &小時的值存儲在變量中。將setTimeout（）調用存儲到變量以防萬一要稍後停止時鐘是個不錯的主意。像「暫停」一樣。

http://jsfiddle.net/chepe263/A3a9m/4/

<html> 
    <head> 
     <style type="text/css"> 
     ul li{ 
     float: left; 
     list-style-type: none !important; 

     } 
     </style> 
     <script type="text/javascript">//<![CDATA[ 
     window.onload=function(){ 

     var sec = min = hour = 0; 
     var clock = 0; 
     stopWatch = function(){ 
      clearTimeout(clock); 
      sec++; 
      if (sec >=59){ 
       sec = 0; 
       min++; 
      } 
      if (min>=59){ 
       min=0; 
       hour++; 
      } 
      document.getElementById("sec").innerHTML = (sec < 10) ? "0" + sec : sec; 
      document.getElementById("min").innerHTML = (min < 10) ? "0" + min : min; 
      document.getElementById("hour").innerHTML = (hour < 10) ? "0" + hour : hour; 
      clock = setTimeout("stopWatch()",1000); } 
     stopWatch(); 
     pause = function(){ 
     clearTimeout(clock); 
      return false; 
     } 

     play = function(){ 
      stopWatch(); 
     return false; 
     } 

     reset = function(){ 
      sec = min = hour = 0; 
      stopWatch(); 
     return false; 
     }   

     }//]]> 
     </script> 
    </head> 
    <body> 
     <ul> 
      <li id="hour">00</li> 
      <li>:</li> 
      <li id="min">00</li> 
      <li>:</li> 
      <li id="sec">49</li> 
     </ul> 
    <hr /> 
    <a href="#" id="pause" onClick="pause()">Pause</a> 
    <a href="#" id="Play" onClick="play()">Continue</a> 
    <a href="#" id="Reset" onClick="reset()">Reset</a> 
    </body> 
</html>

來源

2013-07-16 19:00:47 chepe263

這是我的完整代碼，這可能會幫助你：

<html> 
<head> 
    <title>Stopwatch Application (Using JAVASCRIPT + HTML + CSS)</title> 
    <script language="JavaScript" type="text/javascript"> 
      var theResult = ""; 
      window.onload=function() { document.getElementById('morefeature').style.display = 'none'; } 
      function stopwatch(text) { 
       var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); var ms = d.getMilliseconds(); 
       document.stopwatchclock.stpwtch.value = + h + " : " + m + " : " + s + " : " + ms; 
       if (text == "Start") { 
        document.stopwatchclock.theButton.value = "Stop"; 
        document.stopwatchclock.theButton.title = "The 'STOP' button will save the current stopwatch time in the stopwatch history, halt the stopwatch, and export the history as JSON object. A stopped stpwatch cannot be started again."; 
        document.getElementById('morefeature').style.display = 'block'; 
       } 
       if (text == "Stop") { 
        var jsnResult = arrAdd(); 
        var cnt = 0; var op= 'jeson output'; 
        for (var i = 0; i < jsnResult.length; i++) { 
         if (arr[i] !== undefined) { 
          ++cnt; /*json process*/ 
          var j={ Record : cnt, Time : arr[i]}; 
          var dq='"'; 
          var json="{"; 
          var last=Object.keys(j).length; 
          var count=0; 
          for(x in j){ json += dq+x+dq+":"+dq+j[x]+dq; count++; 
          if(count<last)json +=","; 
          } 
          json+="}<br>"; 
          document.write(json); 
         } 
        } 
       } 
       if (document.stopwatchclock.theButton.value == "Start") { return true; } 
       SD=window.setTimeout("stopwatch();", 100); 
       theResult = document.stopwatchclock.stpwtch.value; 
       document.stopwatchclock.stpwtch.title = "Start with current time with the format (hours:mins:secs.milliseconds)" ; 
      } 
      function resetIt() { 
       if (document.stopwatchclock.theButton.value == "Stop") { document.stopwatchclock.theButton.value = "Start"; } 
       window.clearTimeout(SD); 
      } 
      function saveIt() { 
       var value = parseInt(document.getElementById('number').value, 10); 
       value = isNaN(value) ? 0 : value; value++; 
       document.getElementById('number').value = value; 
       var resultTitle = ''; 
       if(value == '1'){ resultTitle = "<h3>History</h3><hr color='black'>"; } 
       var objTo = document.getElementById('stopwatchresult') 
       var spanTag = document.createElement("span"); 
        spanTag.id = "span"+value; 
        spanTag.className ="stopWatchClass"; 
        spanTag.title ="The stopwatch showing current stopwatch time and a history of saved times. Each saved time are shown as total duration (split time - stopwatch start time) and a lap duration (split time - previous split time). And durations are shown in this format: 'hours:mins:secs.milliseconds'"; 
        spanTag.innerHTML = resultTitle +"<br/><b>Record " + value+" =</b> " + theResult + ""; 
        objTo.appendChild(spanTag); 
       arrAdd(theResult); 
       return; 
      } 
      var arr = Array(); 
      function arrAdd(value){ arr.push(value); return arr;} 
    </script> 
    <style> 
     center { 
      width: 50%; 
      margin-left: 25%; 
     } 

     .mainblock { 
      background-color: #07c1cc; 
     } 

     .stopWatchClass { 
      background-color: #07c1cc; 
      display: block; 
     } 

     #stopwatchclock input { 
      margin-bottom: 10px; 
      width: 120px; 
     } 
    </style> 
</head> 
<body> 
    <center> 
     <div class="mainblock"> 
      <h1><b title="Stopwatch Application (Using JAVASCRIPT + HTML + CSS)">Stopwatch Application</b></h1> 
      <form name="stopwatchclock" id="stopwatchclock"> 
       <input type="text" size="16" class="" name="stpwtch" value=" 00 : 00 : 00 : 00" title="Initially blank" /> 
       <input type="button" name="theButton" id="start" onClick="stopwatch(this.value);" value="Start" title="The 'START' button is start the stopwatch. An already started stopwatch cannot be started again." /><br /> 
       <div id="morefeature"> 
        <input type="button" value="Reset" id="resetme" onClick="resetIt();reset();" title="Once you will click on 'RESET' button will entirely reset the stopwatch so that it can be started again." /> 
        <input type="button" name="saver" id="split" value="SPLIT" onClick="saveIt();" title="The 'SPLIT' button will save the current stopwatch time in the stopwatch history. The stopwatch will continue to progress after split." /> 
        <div> 
         <input type="hidden" name="number" id="number" value="0" /> 
      </form> 
     </div> 
     <div id="stopwatchresult"></div> 
    </center> 
</body>

來源

2015-11-26 20:11:16

使用Javascript Stopwatch遇到問題

回答

相關問題