Javascript 经常更新值时闪烁_Javascript_Html_Datetime_Dom

Javascript 经常更新值时闪烁

javascript html datetime dom

Javascript 经常更新值时闪烁,javascript,html,datetime,dom,Javascript,Html,Datetime,Dom,我一直在用Javascript制作秒表，并成功地实现了所有功能。然而，由于计时器每10毫秒更新一次，chrome开发控制台显示网页有时在秒表字段中不绘制任何内容，导致该字段在时间再次出现时突然闪烁我想知道我怎样才能实现无闪烁静态秒表主持人: stopwatch.js window.addEventListener("load", function(e){ var interval; var state = 0; var display = document.getE

我一直在用Javascript制作秒表，并成功地实现了所有功能。然而，由于计时器每10毫秒更新一次，chrome开发控制台显示网页有时在秒表字段中不绘制任何内容，导致该字段在时间再次出现时突然闪烁

我想知道我怎样才能实现无闪烁静态秒表

主持人:

stopwatch.js

window.addEventListener("load", function(e){

    var interval;
    var state = 0;
    var display = document.getElementById('display-area');
    var offset;
    var clock = 0;

    function updateTimer() {
        clock += delta();
        var time = format(clock);
        if (time != "") {
            display.value = time;
        }
    }

    function format(clock) {
        var timer = new Date(clock);
        var currentHours = timer.getHours()-1;
        var currentMinutes = timer.getMinutes();
        var currentSeconds = timer.getSeconds();
        var currentMilliseconds = timer.getMilliseconds();

        currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
        currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
        currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
        currentMilliseconds = ( currentMilliseconds < 100 ? "0" : "" ) + currentMilliseconds;
        return currentHours + ":" + currentMinutes + ":" + currentSeconds + "." + currentMilliseconds;
    }

    function delta() {
        var now = Date.now();
        d = now - offset;
        offset = now;
        return d;
    }

    function toggle() {
        console.log(state);
        if (!interval) {
            console.log("start");
            offset = Date.now();
            interval = setInterval(updateTimer, 10);
        } else {
            console.log("stop");
            clearInterval(interval);
            interval = null;
        }
    }

    function reset() {
        if(interval) {
            toggle();
        }
        display.value = "00:00:00.000"
        clock = 0;
    }

    document.getElementById('toggle-button').addEventListener("click", toggle);
    document.getElementById('reset-button').addEventListener("click", reset);
})

window.addEventListener（“加载”，函数（e）{
var区间；
var状态=0；
var display=document.getElementById（'display-area'）；
var偏移；
var时钟=0；
函数updateTimer（）{
时钟+=增量（）；
var时间=格式（时钟）；
如果（时间！=“”）{
display.value=时间；
}
}
功能格式（时钟）{
var定时器=新日期（时钟）；
var currentHours=timer.getHours（）-1；
var currentMinutes=timer.getMinutes（）；
var currentSeconds=timer.getSeconds（）；
var currentmilluses=timer.getMilluses（）；
当前小时数=（当前小时数<10？：“）+当前小时数；
currentMinutes=（currentMinutes<10？“0”：“）+currentMinutes；
currentSeconds=（currentSeconds<10？“0”：“）+currentSeconds；
currentmissions=（currentmissions<100？：“）+currentmissions；
返回currentHours+“：“+currentMinutes+”：“+currentSeconds+”+“+current毫秒；
}
函数delta（）{
var now=Date.now（）；
d=现在-偏移量；
偏移量=现在；
返回d；
}
函数切换（）{
console.log（状态）；
如果（！间隔）{
控制台日志（“启动”）；
偏移量=日期。现在（）；
间隔=设置间隔（updateTimer，10）；
}否则{
控制台日志（“停止”）；
间隔时间；
间隔=空；
}
}
函数重置（）{
如果（间隔）{
切换（）；
}
display.value=“00:00:00.000”
时钟=0；
}
document.getElementById（'toggle-button'）。addEventListener（“单击”，切换）；
document.getElementById（'reset-button'）。addEventListener（“单击”，重置）；
})

stopwatch.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Stopwatch</title>
        <script src="stopwatch.js"></script>
        <style>
            body { text-align: center; margin-top: 200px; font-family: courier;}
            #display-area { font-size: 20pt; }
        </style>
    </head>
    <body>
        <div>
            <output id="display-area">00:00:00.000</output>
        </div>
        <div>
            <button id="toggle-button">Start / Stop</button>
            <button id="reset-button">Reset</button>
        </div>
    </body>
</html>


秒表
正文{文本对齐：居中；页边距顶部：200px；字体系列：courier；}
#显示区{字体大小：20pt；}
00:00:00.000
启动/停止
重置

这是最新的chrome浏览器，没有任何闪烁，因此我无法重新创建它，也无法判断此解决方案是否正确，但它可能是一个解决方案

这可能是浏览器本身造成的问题。人眼每16毫秒只能看到明显的变化，循环运行的时间肯定比这短。问题可能只是浏览器不希望您在16毫秒之前更新元素的内容。如果您说它大约每10毫秒运行一次，那么每4秒将有一个完整的周期（16毫秒），在这个周期中，该值将不会显示。这只是一个理论，我无法证明

而不是

interval=setInterval（updateTimer，10），尝试间隔-=16；setTimeout（updateTimer，16）
，它应该每16毫秒或更长时间执行一次操作
如果这不正确，那么它可能是相关的事实上我在控制台中做了更多的工作，结果证明我的代码在所有情况下都没有添加尾随零，例如（01，05），而是在（009，014）中。因此，我添加了代码来手动向这些情况添加一个尾随零。结果很完美！完美的谢谢你的“正确答案”，尽管我什么也没做XD