Fatal编程技术网
  • javascript/
  • 以毫秒为增量的Javascript秒表

以毫秒为增量的Javascript秒表

javascript

以毫秒为增量的Javascript秒表,javascript,stopwatch,Javascript,Stopwatch,我正在尝试使用JavaScript组装秒表。我已经用正确的信息填写了日期，但是我的秒表坏了。我单击开始，数字从0开始移动，我希望它以毫秒为单位递增。我还有我的JS和HTML代码。HTML功能正常，但JS功能不正常。我对JavaScript世界非常熟悉，我看了又看，没能找到一个对我有利的解决方案。谢谢你的帮助 "use strict"; var $ = function(id) { return document.getElementById(id); }; var stopwatchTimer

我正在尝试使用JavaScript组装秒表。我已经用正确的信息填写了日期，但是我的秒表坏了。我单击开始，数字从0开始移动，我希望它以毫秒为单位递增。我还有我的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>

“严格使用”；
var$=函数（id）{return document.getElementById（id）；}；
var秒表定时器；
var elapsedMinutes=0；
var elapsedSeconds=0；
var elapsedMilliseconds=0；
var displayCurrentTime=函数（）{
var now=新日期（）；
var hours=now.getHours（）；
var ampm=“AM”；
如果（小时数>12）{
小时=小时-12；
ampm=“PM”；
}否则{
开关（小时）{
案例12：
ampm=“PM”；
打破
案例0：
小时=12；
ampm=“AM”；
}
}
$（“小时”）.firstChild.nodeValue=小时；
$（“分钟”）.firstChild.nodeValue=padsingledigital（now.getMinutes（））；
$（“秒”）.firstChild.nodeValue=padsingledigital（现在是.getSeconds（））；
$（“ampm”）.firstChild.nodeValue=ampm；
};
var PADSingledigital=函数（num）{
如果（num<10）{返回“0”+num；}
else{return num；}
};
var tickStopwatch=函数（）{
//我还需要以10毫秒为增量，但不确定我//是否正确
var-ms=0；
var-sec=0；
var min=0；
var frame=函数（）{
如果（ms==1000）
ms=0；
sec++；
}
如果（秒=60）{
秒=0；
min++；
document.getElementById（“s_seconds”）.innerHTML=valueOf（秒）；
document.getElementById（“s_分钟”）.innerHTML=valueOf（min）；
document.getElementById（“s_-ms”）.innerHTML=valueOf（ms）；
}
};
var startStopwatch=功能（evt）{
};
var秒表=功能（evt）{
};
var RESET秒表=功能（evt）{
};
window.onload=函数（）{
displayCurrentTime（）；
设置间隔（滴答滴答的秒表，1000）；
};
“严格使用”//evt在一个单独的文件中
var evt={
附加：函数（节点、事件名、函数）{
},
分离：函数（节点、事件名称、函数）{
},
默认值：函数（e）{
}
};
钟
带秒表的数字钟
钟
: 
: 
秒表
00: 
00: 
000
您的间隔函数设置为每1000毫秒（或1秒）运行一次，这不会给您1毫秒的分辨率。事实上，使用
setInterval
可以达到的最佳分辨率是10ms。您还需要增加一个计数器，这是您目前没有做的

尝试：

替换此行：

setInterval(tickStopwatch, 1000);

setInterval(tickStopwatch, 1);
这一行：

setInterval(tickStopwatch, 1000);

setInterval(tickStopwatch, 1);
如果以增量方式更新值
ms
，
seconds
，
minutes
，则永远不会准确。每次更新都会浪费时间。在JS中，根本没有时间间隔可以以这样的速度和精度运行

相反，从内部时钟计算它们

let offset=0，
暂停=真；
render（）；
功能启动TopWatch（evt）{
如果（暂停）{
暂停=错误；
偏移量-=日期。现在（）；
render（）；
}
}
功能秒表（evt）{
如果（！暂停）{
暂停=真；
偏移量+=日期。现在（）；
}
}
功能重置秒表（evt）{
如果（暂停）{
偏移量=0；
render（）；
}否则{
偏移量=-Date.now（）；
}
}
函数格式（值、比例、模、填充）{
值=数学地板（值/比例）%模；
返回值.toString（）.padStart（padding，0）；
}
函数render（）{
var value=paused？offset:Date.now（）+offset；
document.querySelector（'s#ms'）.textContent=format（值，1，1000，3）；
document.querySelector（“#s#u seconds”）.textContent=format（值1000,60,2）；
document.querySelector（'s#u minutes'）.textContent=format（值60000,60,2）；
如果（！暂停）{
请求动画帧（渲染）；
}
}

秒表
00:
00:
000

setinterval
和
setTimeout
的最小更新间隔约为10ms，准确度取决于负载。
setinterval
不支持1ms分辨率。最小值为10毫秒。@marc_，谢谢