番茄鍾 - 麻煩設定時間

我是全新的堆棧溢出和相當新的編碼。這個Pomodoro時鐘是我沒有遵循教程做出的第一件事。我想知道如何解決這個問題，以及爲什麼有些事情會像現在這樣。我的問題/問題：番茄鍾 - 麻煩設定時間

第一次單擊+或 - ，設置時間不移動......在第二次點擊它開始工作。爲什麼？
當我改變設置時間時，中間的時間上下移動，但它總是偏離1 ...此外，如果設置的時間表示27，中間的時間將表示28，並且console.log （x）會說29.這裏發生了什麼？
我該如何連接中間的時間，以便當我點擊「啓動計時器」時，它從那個時間開始？

我的時鐘：https://codepen.io/phershbe/pen/gxOKYz

的JavaScript代碼：

var minutes; 
var clockSeconds; 
var time; 
var x = 25; 
var seconds = x * 60; 


function countdown() { 
    setInterval("count()", 1000); 
} 

function minutesSeconds() { 
    minutes = Math.floor(seconds/60); 
    if (seconds >= 60) { 
     clockSeconds = seconds % 60; 
    }; 
    if (seconds < 60) { 
     clockSeconds = seconds; 
    } 
} 

function defineTime() { 
    time = minutes + ":" + (clockSeconds < 10 ? "0" : "") + clockSeconds; 
} 


function count() { 
    minutesSeconds(); 
    defineTime(); 
    document.getElementById("timeLeft").innerHTML = time; 
    seconds--; 
    if (seconds < 0) { 
     document.getElementById("timeLeft").innerHTML = "Done"; 
    } 
} 


function initialTime() { 
    document.getElementById("chooseTime").innerHTML = x; 
} 

function mainTime() { 
    document.getElementById("timeLeft").innerHTML = x + ":" + "0" + seconds % 60; 
} 

function allTime() { 
    initialTime(); 
    mainTime(); 
} 

function add() { 
    document.getElementById("chooseTime").innerHTML = x++; 
    document.getElementById("timeLeft").innerHTML = x++; 

} 

function subtract() { 
    document.getElementById("chooseTime").innerHTML = x--; 
    document.getElementById("timeLeft").innerHTML = x--; 
}

謝謝你在前進的人誰看這個和/或答案。我知道代碼是一團糟，可能是一個調試噩夢，但這是我做的第一件事，我爲此感到自豪。

來源

2017-07-24 phershbe

當你寫x++返回x和然後加1 x。因此，在第一次單擊時，該值將始終爲25.您應該在返回值之前寫入++x，以便將1添加到x。看看here瞭解更多關於它如何工作的信息。
你打給x++兩次。這意味着每次添加1到x，並且頂部和中間值之間總會有差異。您應該只在第一次將x添加到x中。
x的更新未反映在seconds（用於計時器中）。在你的countdown()函數中設置的值爲seconds。即啓動定時器之前的seconds = x * 60;。

固定JS：

var minutes; 
var clockSeconds; 
var time; 
var x = 25; 

function countdown() { 
    seconds = x * 60; 
    setInterval("count()", 1000); 
} 

function minutesSeconds() { 
    minutes = Math.floor(seconds/60); 
    if (seconds >= 60) { 
     clockSeconds = seconds % 60; 
    }; 
    if (seconds < 60) { 
     clockSeconds = seconds; 
    } 
} 

function defineTime() { 
    time = minutes + ":" + (clockSeconds < 10 ? "0" : "") + clockSeconds; 
} 


function count() { 
    minutesSeconds(); 
    defineTime(); 
    document.getElementById("timeLeft").innerHTML = time; 
    seconds--; 
    if (seconds <= 0) { 
     document.getElementById("timeLeft").innerHTML = "Done"; 
    } 
} 


function initialTime() { 
    document.getElementById("chooseTime").innerHTML = x; 
} 

function mainTime() { 
    document.getElementById("timeLeft").innerHTML = x + ":" + "0" + seconds % 60; 
} 

function allTime() { 
    initialTime(); 
    mainTime(); 
} 

function add() { 
    document.getElementById("chooseTime").innerHTML = ++x; 
    document.getElementById("timeLeft").innerHTML = x; 

} 

function subtract() { 
    document.getElementById("chooseTime").innerHTML = --x; 
    document.getElementById("timeLeft").innerHTML = x; 
}

來源

2017-07-24 15:38:02 H77

番茄鍾 - 麻煩設定時間

回答

相關問題