開始1個定時器時鐘後，使用JavaScript循環它

Question

我在我的網站有兩個倒計時器。一個計時器會自動啓動，但下一個只能在第一個完成後才啓動。這應該永遠循環，即一個接一個地開始。

這裏是我試過的代碼：

function count() { 
    var startTime = document.getElementById('hms').innerHTML; 
    var pieces = startTime.split(":"); 
    var time = new Date(); 
    time.setHours(pieces[0]); 
    time.setMinutes(pieces[1]); 
    time.setSeconds(pieces[2]); 
    var timedif = new Date(time.valueOf() - 1000); 
    var newtime = timedif.toTimeString().split(" ")[0]; 
    document.getElementById('hms').innerHTML = newtime; 
    if (newtime !== '00:00:00') { 
     setTimeout(count, 1000); 
    } else { 
     count1(); 
    } 

} 

count(); 

function count1() { 
    var startTime = document.getElementById('hms1').innerHTML; 
    var pieces = startTime.split(":"); 
    var time = new Date(); 
    time.setHours(); 
    time.setMinutes(pieces[1]); 
    time.setSeconds(pieces[2]); 
    var timedif = new Date(time.valueOf() - 1000); 
    var newtime = timedif.toTimeString().split(" ")[0]; 
    document.getElementById('hms1').innerHTML = newtime; 
    if (newtime !== '00:00:00') { 
     setTimeout(count, 1000); 
    } else { 
     count(); 
    } 

} 

HTML：

<div id="hms">00:00:10</div> 


<div id="hms1">00:02:10</div> 

我無法使這項工作。幫幫我！！

Answer 1

您當前的代碼幾乎沒有 - 一個幾個小問題：

1. time.setHours缺少參數上線23，應如下所示：

   var time = new Date(); time.setHours(pieces[0]);

2. 線30應該調用備用功能：

   setTimeout(count1, 1000);

3. 只能有一個計數器應在運行時間，所以不需要在最後一行（count1()）。

這裏是updated JSBin。

然而，這裏DRY解決方案會更合適，以避免管理兩個功能：

var currentTimer = 'hms'; 
var alternateTimer = 'hms1'; 

function count() { 
    var timer = document.getElementById(currentTimer); 

    var startTime = timer.innerHTML; 
    var pieces = startTime.split(':'); 
    var time = new Date(); 

    time.setHours(pieces[0]); 
    time.setMinutes(pieces[1]); 
    time.setSeconds(pieces[2]); 

    var timedif = new Date(time.valueOf() - 1000); 
    var newtime = timedif.toTimeString().split(' ')[0]; 

    // Update DOM 
    timer.innerHTML = newtime; 

    if(newtime === '00:00:00') { 
    // Swap the two timers 
    currentTimer = [alternateTimer, alternateTimer = currentTimer][0]; 
    } 

    setTimeout(count, 1000); 
} 

count(); 

希望幫助！

Answer 2

count應該啓動一個超時運行count1，並反過來：

initial_count = 5; // say 5 sec. count-down 
initial_count1 = 7; 
ic = initial_count; 
function count() { 
    ic-- 
    if (ic>=0) 
    setTimeout(count, 1000); // refresh every 1sec. 
    else { 
    ic = initial_count1; 
    count1(); 
    } 
} 

function count1() { 
    ic-- 
    if (ic>=0) 
    setTimeout(count1, 1000); // refresh every 1sec. 
    else { 
    ic = initial_count; 
    count(); 
    } 
} 

count(); // start the first alarm. 

添加您的邏輯的所有剩餘...

Answer 3

function count() { 
    var startTime = document.getElementById('hms').innerHTML; 
    var pieces = startTime.split(":"); 
    var time = new Date(); time.setHours(pieces[0]); 
    time.setMinutes(pieces[1]); 
    time.setSeconds(pieces[2]); 
    var timedif = new Date(time.valueOf() - 1000); 
    var newtime = timedif.toTimeString().split(" ")[0]; 
    document.getElementById('hms').innerHTML=newtime; 
    if(newtime!=='00:00:00'){ 
    setTimeout(count, 1000); 
    }else 
    { 
    count1(); 
    } 

} 

count(); 


function count1() { 
    var startTime = document.getElementById('hms1').innerHTML; 
    var pieces = startTime.split(":"); 
    var time = new Date(); time.setHours(); 
    time.setMinutes(pieces[1]); 
    time.setSeconds(pieces[2]); 
    var timedif = new Date(time.valueOf() - 1000); 
    var newtime = timedif.toTimeString().split(" ")[0]; 
    document.getElementById('hms1').innerHTML=newtime; 
    if(newtime!=='00:00:00' && newtime!=='00:00:01'){ 
     setTimeout(count, 1000); 
    }else 
    { 
     count(); 
    } 

    } 

count1();