制作倒计时函数来解析html中的新值

Make countdown function to parse the new value from html

本文关键字：html 新值 倒计时 函数      更新时间：2023-09-26

我正在制作一个计时器，在我通过点击按钮开始主倒计时功能之前，我希望能够选择休息多久将持续。我正在用increebreak()和reducebreak()函数改变html，但它不会"看到"新值，只是从3开始计数，这是html(breakTime)中的默认值。main函数工作正常，解析正常

我猜我把范围弄乱了，但我想不出来。谢谢你的建议

<!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;
    }
}

我已经在函数内引用了全局变量(takeBreak = breakTime;)，然后由increenumber函数更新它。这个stackoverflow的答案有帮助:

如何更改函数内部全局变量的值

相关文章：