番茄钟——麻烦设置时间

Question

我是 Stack Overflow 的新手，也是编码的新手。这个番茄钟是我在没有遵循教程的情况下制作的第一件东西。我想知道如何修复它，更重要的是为什么有些事情会按原样运行。我的 questions/issues:

我第一次点击 + 或 - 时，设置的时间没有移动...在第二次点击时它开始工作。为什么？
当我更改设置时间时，中间时间上下移动，但它总是偏移 1...此外，如果设置时间为 27，中间时间将显示为 28，并且 console.log(x) 会说 29。这里发生了什么？
如何连接中间的时间，以便当我点击 "start timer" 时，它从那个时间开始？

我的时钟：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--;
}

提前感谢所有查看此 and/or 答案的人。我知道代码一团糟，可能是调试的噩梦，但这是我做的第一件事，我很自豪我能做到这一点。

Answer 1

当你写 x++ 时，它 returns x 和然后将 x 加 1。因此，在第一次单击时，该值将始终为 25。您应该改为编写 ++x，以便在返回值之前将 1 添加到 x。查看 here 以了解有关其工作原理的更多信息。
您正在呼叫 x++ 两次。这意味着每次都将 1 添加到 x 并且顶部和中间值之间始终存在差异。您应该只在第一次将 1 加到 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;
}

番茄钟——麻烦设置时间

Pomodoro Clock - trouble setting time

javascript

countdown

countdowntimer