Question

我正在尝试使用JavaScript组装秒表。我有填写正确信息的日期，但我的秒表不起作用。我单击开始，数字永远不会从0开始移动，我希望它在MS中以秒为单位递增。我也有JS和HTML的代码。 HTML可以正常运行，而JS则不能。我对JavaScript界非常了解，我已经看了又看，无法找到对我有好处的解决方案。谢谢你的协助。

"use strict";
var $ = function(id) { return document.getElementById(id); };

var stopwatchTimer;

var elapsedMinutes = 0;

var elapsedSeconds = 0;

var elapsedMilliseconds = 0;

var displayCurrentTime = function() {

  var now = new Date();

var hours = now.getHours();

var ampm = "AM";
if (hours > 12) { 

hours = hours - 12;

ampm = "PM";


} else { 

 switch (hours) {

case 12:

 ampm = "PM";

break;

case 0:  

 hours = 12;

ampm = "AM";

 }

 }


$("hours").firstChild.nodeValue = hours;

$("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());

$("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());

$("ampm").firstChild.nodeValue = ampm;

};

var padSingleDigit = function(num) {

if (num < 10) { return "0" + num; }

else { return num; }

};

var tickStopwatch = function() {    
// I also need to increment in 10 milliseconds increments but unsure if I //have this right


var ms=0;
var sec=0;
var min=0;

var frame= function() {
If(ms==1000)
        ms=0;
        sec++;
}
if(sec==60) {
        sec=0;
        min++;

document.getElementById("s_seconds").innerHTML = valueOf(sec);
document.getElementById("s_minutes").innerHTML = valueOf(min);
document.getElementById("s_ms").innerHTML = valueOf(ms);
}

};

var startStopwatch = function(evt) {

};

var stopStopwatch = function(evt) {

};

var resetStopwatch = function(evt) {

};
window.onload = function() {    

displayCurrentTime();    
setInterval(tickStopwatch, 1000);
};
"use strict"; //evt is in a separate file
var evt = {
    attach: function(node, eventName, func) {

    },
    detach: function(node, eventName, func) {

    },
    preventDefault: function(e) {

    }
};


    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Clock</title> 
    <link rel="stylesheet" href="clock.css"> 

    <script src="library_event.js"></script> 

    <script src="clock.js"></script> 

    </head> 
    <body> 
    <main> 
    <h1>Digital clock with stopwatch</h1> 
    <fieldset> 
    <legend>Clock</legend> 
    <span id="hours">&nbsp;</span>: 
    <span id="minutes">&nbsp;</span>: 
    <span id="seconds">&nbsp;</span>&nbsp; 
    <span id="ampm">&nbsp;</span> 
    </fieldset> 

    <fieldset> 
    <legend>Stop Watch</legend> 
    <a href="#" id="start">Start</a>&nbsp; 

    <a href="#" id="stop">Stop</a>&nbsp; 

    <a href="#" id="reset">Reset</a>&nbsp; 

    <span id="s_minutes">00</span>: 
    <span id="s_seconds">00</span>: 
    <span id="s_ms">000</span> 
    </fieldset> 
    </main> 
    </body> 
    </html>

Answer 1

如果您递增更新值ms，seconds，minutes，那么您将永远不准确。您每次更新都会浪费时间。在JS中，根本没有间隔能够以这种速度和精度运行。

相反，请根据内部时钟进行计算

let offset = 0,
  paused = true;

render();
  
function startStopwatch(evt) {
  if (paused) {
    paused = false;
    offset -= Date.now();
    render();
  }
}

function stopStopwatch(evt) {
  if (!paused) {
    paused = true;
    offset += Date.now();
  }
}

function resetStopwatch(evt) {
  if (paused) {
    offset = 0;
    render();
  } else {
    offset = -Date.now();
  }
}

function format(value, scale, modulo, padding) {
  value = Math.floor(value / scale) % modulo;
  return value.toString().padStart(padding, 0);
}

function render() {
  var value = paused ? offset : Date.now() + offset;

  document.querySelector('#s_ms').textContent = format(value, 1, 1000, 3);
  document.querySelector('#s_seconds').textContent = format(value, 1000, 60, 2);
  document.querySelector('#s_minutes').textContent = format(value, 60000, 60, 2);
  
  if(!paused) {
    requestAnimationFrame(render);
  }
}

<fieldset>
  <legend>Stop Watch</legend>
  <a href="#" id="start" onclick="startStopwatch()">Start</a>&nbsp;

  <a href="#" id="stop" onclick="stopStopwatch()">Stop</a>&nbsp;

  <a href="#" id="reset" onclick="resetStopwatch()">Reset</a>&nbsp;

  <span id="s_minutes">00</span>:
  <span id="s_seconds">00</span>:
  <span id="s_ms">000</span>
</fieldset>

offset存储两个值：当paused时，它存储您停止处的值；否则，它存储您必须加到Date.now()上的偏移量以计算该值。

该值是以毫秒为单位的时间，用秒和分钟来计算是基本算术。

Answer 2

您的间隔功能设置为每1000毫秒（或1秒）运行一次，而不会为您提供1毫秒的分辨率。实际上，您能做的最好的就是使用setInterval获得10ms的分辨率。您还需要增加一个计数器，而您目前不这样做。

尝试：

setInterval(tickStopwatch, 10);

var ms = 0;
var tickStopwatch = function() {    
   var ms += 10;
   // rest of your logic
}

Answer 3

替换此行：

setInterval(tickStopwatch, 1000);

此行：

setInterval(tickStopwatch, 1);

带有毫秒增量的Java秒表

3 个答案: