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

Question

我想为一个项目制作一个倒数计时器，当用户以00:00:00的hms格式输入一些时间时倒计时开始，我写了一些半正确的代码，我丢了什么做下一步

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我知道我让这个变得复杂，有人可以让它变得简单吗？这将是一个很大的帮助，谢谢！

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