Question

我是Stack Overflow的新手，对编码很陌生。这个Pomodoro时钟是我没有遵循教程的第一件事。我想知道如何修复它，更不知道为什么有些东西表现得像它们一样。我的问题：

我第一次点击+或 - 时，设定的时间不动......第二次点击它开始工作。为什么？
当我改变设定时间时，中间的时间会上下移动，但总是偏离1 ...此外，如果设定时间为27，则中间的时间为28，并且控制台.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--;
}

提前感谢任何看过这个和/或答案的人。我知道代码是一团糟，可能是一个调试的噩梦，但这是我做的第一件事，我为此感到自豪。

Answer 1

当您撰写x++时，它会返回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;
}

番茄钟 - 麻烦设定时间

1 个答案: