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

Question

我有一个由 onclick 按钮调用的倒计时函数，以及按钮中的值“剩余”、“元素”和“回调”[一个函数]。

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

Answer 1

问题是您从未在每次迭代后更新剩余值。我确实将参数名称重命名为 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