javascript手動倒計時器（基於用戶輸入）

我想爲倒計時開始，當用戶輸入一些時間在00:00:00 hms格式的項目倒計時，我寫了一些代碼一半是正確的，我失去了未來javascript手動倒計時器（基於用戶輸入）

// Wait for user to click the button before reading the value 
 
window.onload=function(){ 
 
\t var work = document.getElementById("dl"); 
 
\t work.addEventListener("click", handler); 
 
} 
 

 

 
function handler() { 
 
\t 
 
\t \t //taking user input 
 
\t \t var time1 = document.getElementById('hms').value; 
 
\t \t //splitting it to seperate variables 
 
\t \t var pieces = time1.split(":"); 
 
\t \t 
 
\t \t var hours = pieces[0]; 
 
\t \t var minutes = pieces[1]; 
 
\t \t var seconds = pieces[2]; 
 
\t \t 
 
\t \t //just calculating total number of seconds 
 
\t \t seconds = seconds + minutes*60 + hours*3600; 
 
\t \t 
 
\t \t var tot = seconds + minutes*60 + hours*3600; 
 
\t \t 
 
\t \t // Save the interval's handle to `timer` 
 
\t \t var timer = setInterval(countdown, 1000); 
 

 
\t \t function countdown() { 
 
\t \t var container = document.getElementById('count'); 
 
\t \t 
 
\t \t var counter = 0, k=1, j=1, i=0, s1= pieces[2]; 
 
\t \t 
 
\t \t //loop to print the timer 
 
\t \t for(i=0; i<tot; i++){ 
 
\t \t \t if(seconds>0){ 
 
\t \t \t counter ++ ; 
 

 
\t \t \t if(counter==60*k){ 
 
\t \t \t \t minutes--; 
 
\t \t \t \t k++; 
 
\t \t \t } 
 
\t \t \t if(counter==3600*j){ 
 
\t \t \t \t hours--; 
 
\t \t \t \t j++; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t container.innerHTML = 'Please wait <b>' + hours + '</b> hours, <b>' + minutes + '</b> minutes, <b>' + seconds + '</b> seconds'; 
 
\t \t \t }//end of if 
 
\t \t \t else { 
 
\t \t \t container.innerHTML = 'Time over'; 
 
\t \t \t clearInterval(timer); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t /* seconds--; 
 
\t \t if (seconds > 0) { 
 
\t \t \t container.innerHTML = 'Please wait <b>' + seconds + '</b> seconds..'; 
 
\t \t \t } else { 
 
\t \t \t container.innerHTML = 'Time over'; 
 
\t \t \t clearInterval(timer); 
 
\t \t \t } */ 
 
\t \t } 
 
\t }

<input type="text" id="hms" placeholder="enter in the format 00:00:00 " /> 
 
\t <input type="button" id="dl" value="Start" /> 
 
\t <div id="count"></div>

我知道我必須做這個複雜的，有人可以使簡單做什麼？這將是一個很大的幫助，謝謝！

來源

2016-09-14 Hy2703

「_i'm失去了做什麼next_」 - > 1.修正錯誤（在控制檯中顯示），2.解釋什麼是「_some代碼是半correct_」是指 – Andreas

完成。一半正確意味着它的工作原理，但不以我想要的方式 – Hy2703

你的邏輯在秒和總計算之間是錯誤的。你正在添加小時和分鐘兩次 –

我修改了函數處理函數。你可以試試這個。

function handler() { 

    //taking user input 
    var time1 = document.getElementById('hms').value; 
    //splitting it to seperate variables 
    var pieces = time1.split(":"); 

    var hours = pieces[0]; 
    var minutes = pieces[1]; 
    var seconds = pieces[2]; 
    var time = { 
     hours: hours * 1, 
     minutes: minutes * 1, 
     seconds: seconds * 1 
    }; 


    // Save the interval's handle to `timer` 
    var timer = setInterval(countdown, 1000); 

    function countdown() { 
     var container = document.getElementById('count'); 

     if (time.seconds > 0) { 
      time.seconds--; 
     } 
     else { 
      if (time.minutes > 0) { 
       time.minutes--; 
       time.seconds = 60; 
      } 
      else { 
       time.minutes = 60; 
       time.seconds = 60; 
       time.hours--; 
      } 
     } 

     if (time.hours >= 0) { 
      container.innerHTML = 'Please wait <b>' + time.hours + '</b> hours, <b>' + time.minutes + '</b> minutes, <b>' + time.seconds + '</b> seconds'; 
     } 
     else { 
      container.innerHTML = 'Time over'; 
      clearInterval(timer); 
     } 
    } 
}

來源

2016-09-14 10:00:40

謝謝！它現在完美運作。 – Hy2703

javascript手動倒計時器（基於用戶輸入）

回答

相關問題