javascript - 通过onclick推送数字值(以毫秒为单位)以发挥作用[Javascript]

我有一个onclick按钮正在调用倒数计时功能，按钮中的值是“ remaining”，“ elements”和“ callback” [a function]。

<input onclick="countdown('4800000', ['days', 'hours', 'minutes', 'seconds'], function(){console.log('Finished');})" type="button">

当我单击按钮时，毫秒值4,800,000被推入该函数，该页面将显示等于该值的1小时20分钟，但该函数从未开始递减计数。

我测试了if（isNaN（remaining），将一个字母值推送到该函数，它显示了console.log，应该知道，所以我不确定是什么问题。请问您是否需要HTML甚至CSS可以解决此问题。

对不起，疯狂记笔记。

//countdown is the entire countdown function called in the HTML file
var countdown = function(remaining /*dateinput*/, elements /*days,hours,minutes,seconds*/, callback/*finished*/) { //end, elements, and callback relate to HTML document


var _second = 1000, //defining 1 second as 1000 (milliseconds)
    _minute = _second * 60, //defining minute as second * 60
    _hour = _minute * 60, //defining hour as minute * 60
    _day = _hour * 24, //defining day as hour * 24
    remaining, //time remaining in countdown
    timer, //defining timer as a variable to start interval and return invalid input if no timer


    calculate = function(){ //defining calculate functiels con for counting down
        var data, //defining data
        countdownalert = function(){ //function to alert with audio after countdown ends
            var audio = new Audio('farmalert.mp3');
            audio.play();
        };

    if(isNaN(remaining)){ //if input date (end) is not a number
        console.log("invalid input"); //return invalid input in console.log
        return; //return/end
    }

    // if remaining time is less than or equal to 0 (if clock has ended)
    if (remaining <= 0) {
    //activates audio alert function
    countdownalert();
    //clear timer
    clearInterval(timer);
        //callback for end of countdown
        if (typeof callback === 'function'){ //if callback is defined as a function
            callback(); //then use function callback
        }
    }
    else { //everything besides not being a number or being less than 0 (ended)
      if(!timer){ //if timer hasn't started
        timer = setInterval(calculate, _second); //start ticking/counting every second
       }
            data = { //defining array of data
            'days': Math.floor(remaining / _day), //calc number to display as days
            'hours': Math.floor((remaining % _day) / _hour),//calc number to display as hours
            'minutes': Math.floor ((remaining % _hour) / _minute),// number to display as minutes
            'seconds': Math.floor((remaining % _minute) / _second)//number to display as seconds
            }
        if (elements.length){ //if elements has a length (exists)
            for (x in elements){ //for x in elements (?confused?)
                var x = elements[x]; // defining x as the current elements in countdown
                data[x] = ('00' + data[x]).slice(-2); //all values in double digit (?slice?)
                document.getElementById(x).innerHTML = data[x]; //using in HTML
            }
        }
        }
    };
calculate(); //running calculate
}

最佳答案

问题是您永远不会在每次迭代后更新剩余值。我确实将参数名称重命名为remainder，并将其分配给新变量remaining。这样，我可以减小该值而不会丢失原始计时器的值：

您可以在此处找到实时工作代码：Example 1

var countdown = function(remainder /*dateinput*/ , elements /*days,hours,minutes,seconds*/ , callback /*finished*/ ) { //end, elements, and callback relate to HTML document

var _second = 1000, //defining 1 second as 1000 (milliseconds)
    _minute = _second * 60, //defining minute as second * 60
    _hour = _minute * 60, //defining hour as minute * 60
    _day = _hour * 24, //defining day as hour * 24
    remaining, //time remaining in countdown
    timer, //defining timer as a variable to start interval and return invalid input if no timer
    remaining = remainder,


    calculate = function() { //defining calculate functiels con for counting down
        var data, //defining data
            countdownalert = function() { //function to alert with audio after countdown ends
                var audio = new Audio('farmalert.mp3');
                audio.play();
            };

        if (isNaN(remaining)) { //if input date (end) is not a number
            console.log("invalid input"); //return invalid input in console.log
            return; //return/end
        }

        // if remaining time is less than or equal to 0 (if clock has ended)
        if (remaining <= 0) {
            //activates audio alert function
            countdownalert();
            //clear timer
            clearInterval(timer);
            //callback for end of countdown
            if (typeof callback === 'function') { //if callback is defined as a function
                callback(); //then use function callback
            }
        } else { //everything besides not being a number or being less than 0 (ended)
            if (!timer) { //if timer hasn't started
                timer = setInterval(calculate, _second); //start ticking/counting every second
            }
            data = { //defining array of data
                'days': Math.floor(remaining / _day), //calc number to display as days
                'hours': Math.floor((remaining % _day) / _hour), //calc number to display as hours
                'minutes': Math.floor((remaining % _hour) / _minute), // number to display as minutes
                'seconds': Math.floor((remaining % _minute) / _second) //number to display as seconds
            }
            if (elements.length) { //if elements has a length (exists)
                for (x in elements) { //for x in elements (?confused?)
                    var x = elements[x]; // defining x as the current elements in countdown
                    data[x] = ('00' + data[x]).slice(-2); //all values in double digit (?slice?)
                    document.getElementById(x).innerHTML = data[x]; //using in HTML
                }
            }
            remaining -= _second;
        }
    };
calculate(); //running calculate

}