番茄鍾計時器：變量值爲'NaN'

我正在嘗試構建一個類似http://codepen.io/GeoffStorbeck/full/RPbGxZ/的番茄鍾。秒的值隨機地到達NaN，然後在開始'break'後恢復正常。番茄鍾計時器：變量值爲'NaN'

$('#circle a').click(function() { 
    var timer = $('.time > span').html(); 
    timer = timer.split(':'); 
    var minutes = timer[0]; //Value of minutes 
    var seconds = timer[1]; //Value of seconds 

    var settimer = setInterval(function() { 
    seconds -= 1; 
    console.log(seconds); 
    if (seconds < 0 && minutes != 0) { 
     minutes -= 1; 
     minutes = String(minutes); 
     seconds = 59; 
    } else if (seconds < 10 && seconds.length != 2) 
     seconds = '0' + seconds; 
    if (minutes < 10 && minutes.length < 2) 
     minutes = '0' + minutes; 

    $('.time > span').html(minutes + ':' + seconds); 

    //Start break when session is completed 
    if (minutes == 0 && seconds == 0) { 
     $('.upper').find('h1').text('BREAK'); 
     var time = $('#break').find('span').text(); 
     $('.time > span').html('0' + time + ':00'); 
     $('#circle a').trigger("click"); //Start timer for break 
    } 
    }, 1000); 
});

這裏的鏈接到codepen http://codepen.io/ibrahimjarif/pen/wMKJWN

如何解決NaN的問題？有沒有更好的方法來實現這個？

來源

2015-12-17 Ibrahim

一些提示：不要使用'parseInt'沒有第二個參數（'10'）。使用'.toString（）'而不是'String（'...'）'。使用數字_whole_time：'var minutes = Number（timer [0]），seconds = Number（timer [1]）;'，只能追加前導'0'或轉換爲字符串_ .html'功能。 – Xufox

@Xufox感謝您的輸入。修復了代碼。 – Ibrahim

@Xufox我應該刪除問題，因爲我解決了這個問題？我是新手。所以請建議。 – Ibrahim

代碼$('#circle a').trigger("click"); //Start timer for break遞歸調用最初執行的函數。此通話在原始通話正在進行時啓動新的定時器。

當新計時器執行時，原定時器的seconds值變爲NaN。由於兩個定時器，second有兩個值。在原定時器中seconds的值導致了原因不明的外觀NaN。

注意：兩個定時器都在同時運行。

最簡單的解決方法是在開始新計時之前停止當前計時器。

下面是更新後的代碼

$('#circle a').click(function() { 
    var timer = $('.time > span').html().split(':');; 
    var minutes = Number(timer[0]), 
    seconds = Number(timer[1]); 

    var settimer = setInterval(function() { 
    seconds -= 1; 
    if (seconds < 0 && minutes != 0) { 
     minutes -= 1; 
     seconds = 59; 
    } else if (seconds < 10 && seconds.length != 2) 
     seconds = '0' + seconds; 
    if (minutes < 10 && minutes.toString().length < 2) 
     minutes = '0' + minutes; 

    $('.time > span').html(minutes + ':' + seconds); 

    if (minutes == 0 && seconds == 0) { 
     clearInterval(settimer); //Stop the current timer 
     var upper_text = $('.upper').find('h1'); 
     var time; 
     if (upper_text.text() == 'BREAK') { 
     upper_text.text('Session'); 
     time = $('#session').find('span').text(); 
     } else { 
     upper_text.text('BREAK'); 
     time = $('#break').find('span').text(); 
     } 
     $('.time > span').html(time + ':00'); 
     $('#circle a').trigger("click"); //Start new timer 
    } 
    }, 1000); 
});

來源

2015-12-18 12:28:38 Ibrahim

番茄鍾計時器：變量值爲'NaN'

回答

相關問題