通過onclick [Javascript]

Question

推動數字值（以毫秒爲單位）我的倒計時功能由一個onclick按鈕以及按鈕中的值「剩餘」，「元素」和「回調」[一個函數]調用。

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

當我點擊該按鈕時，毫秒值480萬被推到了功能像它應該和頁面顯示1小時20分鐘是等於，但功能從來沒有開始倒計時。

我測試了我的if（isNaN（剩餘），其中的字母值被推送到了函數，它顯示了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 

}