Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/374.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
JavaScript倒计时计时器不会显示两次_Javascript_Html - Fatal编程技术网

JavaScript倒计时计时器不会显示两次

JavaScript倒计时计时器不会显示两次,javascript,html,Javascript,Html,我有下面的JavaScript倒计时,这是我在Stackoverflow上的一篇文章中得到的: function startTimer(duration, display) { var start = Date.now(), diff, minutes, seconds; function timer() { diff = duration - (((Date.now() - start) / 1000) | 0);

我有下面的JavaScript倒计时,这是我在Stackoverflow上的一篇文章中得到的:

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        diff = duration - (((Date.now() - start) / 1000) | 0);

        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds; 

        if (diff <= 0) {
            start = Date.now() + 1000;
        }
    };

    timer();
    setInterval(timer, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
但这是行不通的

有人知道发生这种情况的原因吗?我希望当我创建两个具有单独ID的版本时,它们都会显示,但显然它们不会


我相信我可以创建两个版本的计时器,但这似乎不是很优雅。

我想效果非常好 使用span添加了第二个div,并将onload函数修改了一个lottile位;)

功能启动定时器(持续时间,显示){
var start=Date.now(),
差异,
会议记录,
秒;
函数计时器(){
diff=持续时间-((Date.now()-start)/1000)| 0);
分钟=(差异/60)| 0;
秒=(差异%60)| 0;
分钟=分钟<10?“0”+分钟:分钟;
秒=秒<10?“0”+秒:秒;
display.textContent=分钟+“:”+秒;

if(diff)使用两个onload函数,您想要实现什么?
<div class="timerConatiner">
    <div class="countDownTimer"><span id="time"></span></div>
</div>
window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time1');
    startTimer(fiveMinutes, display);
};