javascriptのマニュアルカウントダウンタイマー（ユーザ入力に基づいて）

Question

私は00:00:00 hmsフォーマットでユーザが何時間か入力するとカウントダウンが始まるプロジェクトのカウントダウンタイマーを作りたいと思っています。私は、この複雑にしている知っている

// 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>

は、誰かがそれを簡単にしてくださいすることができます次に何をすべきか迷ってしまいました半分正しいことと？それは大きな助けになります、ありがとう！

Answer 1

私は関数ハンドラを変更しました。これを試すことができます。

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); 
     } 
    } 
}