Question

我正在制作一个计时器，在我通过点击按钮启动主countDown函数之前，我希望能够选择中断的持续时间。我正在使用increasebreak（）和decreaseBreak（）函数更改html，但它不会＆＃34;请参阅＆＃34;新值，只是从3开始倒计时，这是html（breakTime）中的默认值。主要功能正常工作和解析。

我想我已经搞砸了范围，但我无法弄明白。感谢您的建议

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>

<h1 id="num">1 min</h1>

<div id="status"></div>

<button onclick='countDown(secs, "status")'>Start countdown</button>
<button onclick='increaseNumber()'>+</button>
<button onclick='decreaseNumber()'>-</button>

<h3 id="breakTime">3 min</h3>
<button onclick='increaseBreak()'>+</button>
<button onclick='decreaseBreak()'>-</button>
<h2 id="breakOutput"></h2>

<script src="script.js"></script>
</body>
</html>


var num = document.getElementById("num").innerHTML;
var secs = parseInt(num);
var takeBreak = document.getElementById("breakTime").innerHTML;
var breakTime = parseInt(takeBreak);

function countDown(secs, elem) {
    var element = document.getElementById(elem);
    //var secs = parseInt(num);
    element.innerHTML = "Please wait for "+secs+" minutes";

    var second = 0;
    var timer = setInterval(function(){
        var extraZero = second < 10 ? '0' : '';
        document.getElementById("num").innerHTML = secs + ":" + extraZero + second;

        if (second-- === 0) {
            second = 59;
            if (secs-- === 0){
                clearInterval(timer);
                element.innerHTML = '<h2>Countdown complete!</h2>';
                element.innerHTML += '<h4>Take a break</h4>';
                //when countDown is done, start a new function for Break countdown

                startBreak();
            }
        }
    }, 10);
}

function startBreak(breakTime, breakOutput){
    var breakOutput = document.getElementById("breakOutput");
    var breakTime = parseInt(takeBreak);
    var second = 0;
    var shortTimer = setInterval(function(){
    var extraZero = second < 10 ? '0' : '';
    document.getElementById("breakOutput").innerHTML = breakTime + ":" + extraZero + second;

        if (second-- === 0) {
            second = 59;
            if (breakTime-- === 0){
                clearInterval(shortTimer);
                breakOutput.innerHTML = '<h2>Break done!</h2>';
                //alert("Break done!");
                //location.reload();
            }
        }
    }, 10);
}


function increaseNumber() {
    secs += 1;
    document.getElementById("num").innerHTML = secs + ' min';
}

function decreaseNumber() {
    if(secs >= 10) {
        secs -= 1;
        document.getElementById("num").innerHTML = secs + ' min';
    }
}

function increaseBreak() {
    breakTime += 1;
    document.getElementById("breakTime").innerHTML = breakTime;
    //I want to inject this value as a new breakTime for startBreak() function
    takeBreak = breakTime; //referenced global variable inside the function
}

function decreaseBreak() {
    if(breakTime >= 2) {
        breakTime -= 1;
        document.getElementById("breakTime").innerHTML = breakTime;

    }
}

Answer 1

我在函数内部引用了全局变量（takeBreak = breakTime;），然后使用increaseNumber函数更新它。这个stackoverflow答案有帮助：

How do I change the value of a global variable inside of a function

使倒计时功能从html解析新值

1 个答案: