javascript 手动倒数计时器（基于用户输入）

Question

我想为一个项目制作一个倒计时计时器，当用户以 00:00:00 h-m-s 格式输入某个时间时开始倒计时，我写了一些正确的代码，但我丢失了什么下一步

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


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];
  
  //just calculating total number of seconds
  seconds = seconds + minutes*60 + hours*3600;
  
  var tot = seconds + minutes*60 + hours*3600;
  
  // Save the interval's handle to `timer`
  var timer = setInterval(countdown, 1000);

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

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

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

我知道我把它弄复杂了，谁能把它弄简单一点？这将是一个很大的帮助，谢谢！

Answer 1

我修改了函数handler.You可以试试这个。

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

javascript 手动倒数计时器（基于用户输入）

javascript manual countdown timer (based on the user input)

javascript

countdowntimer