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手动倒计时器（基于用户输入）

回答

相关问题