Question

这是我的JS：

var el, usr_t, split_list, mins, secs, countDown;

function counter() {

    el = document.getElementById("countdown");

    usr_t = document.getElementById("countdown").value;
    split_list = usr_t.split(":").map(Number);

    mins = split_list[0];
    secs = split_list[1];

    clearInterval(countDown);

    countDown = setInterval(function() {
        // initiating timer. (Zero-padding included)
        el.innerHTML = (mins + ":" + (secs.toString().length < 2 ? "0" + secs : secs));

        if (secs == 0) {
            mins--;
            secs = 60;
        }
        if(mins < 0) {
            clearInterval(countDown);
            el.innerHTML = ("DONE");
        }
        secs--;

    }, 1000);
}

function stopTimer() {
    clearInterval(countDown);
    document.getElementById("countdown").value = null;
    document.getElementById("countdown").innerHTML = ("Value");
    secsVal = null;
    minsVal = null;

    return;
}

var secsVal = -1, minsVal = -1;
function valueAssign(i) {

    if (secsVal == -1){
        secsVal = i;

        document.getElementById("countdown").innerHTML = (":" + secsVal);
        document.getElementById("countdown").value = (":" + secsVal);
        return;
    }
    else if (secsVal.toString().length == 1) {
        secsVal = "" + secsVal + i;
        secsVal = Number(secsVal);//finalizing secs value

        document.getElementById("countdown").innerHTML = (":" + secsVal);
        document.getElementById("countdown").value = (":" + secsVal);
        return;
    }
    else if ((minsVal == -1) && (secsVal.toString().length == 2)) {
        minsVal = i;

        var sv = secsVal.toString();
        document.getElementById("countdown").innerHTML = (Number(sv[0]) + ":" + Number(sv[1]) + minsVal);
        document.getElementById("countdown").value = (Number(sv[0]) + ":" + Number(sv[1]) + minsVal);
        return;
    }
    else if (minsVal != -1) {
        minsVal = "" + minsVal + i;
        minsVal = Number(minsVal);//finalizing mins value

        document.getElementById("countdown").innerHTML = (secsVal + ":" + minsVal);
        document.getElementById("countdown").value = (secsVal + ":" + minsVal);
        return;
    }
}

我试图实现stopTimer（），它确实停止了时间。但是如果我删除minsVal和secsVal = null，则计时器允许我输入新值而不清除旧值。我很迷惑。这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js_engine.js"></script>
</head>

<body>
        <div id="countdown" class="timer" style="border-style: solid; width:4em; font-size: 2em; text-align: center;">Value</div>

        <button type="button" id="start" value="start" onclick="counter();">Start</button>
        <button value="stop" id="stop" onclick="stopTimer();">Stop</button>
        <button value="addMin" id="addMin" onclick="addTime(this);">Add 1 min</button>
        <button value="pizza" id="pizza" onclick="addTime(this);">Pizza</button>
        <button value="soup" id="soup" onclick="addTime(this);">Soup</button>
            <br>

        <button value="1" id="1" onclick="valueAssign(1);">1</button>
        <button value="2" id="2" onclick="valueAssign(2);">2</button>
        <button value="3" id="3" onclick="valueAssign(3);">3</button>
            <br/>

        <button value="4" id="4" onclick="valueAssign(4);">4</button>
        <button value="5" id="5" onclick="valueAssign(5);">5</button> 
        <button value="6" id="6" onclick="valueAssign(6);">6</button>
            <br/>

        <button value="7" id="7" onclick="valueAssign(7);">7</button>
        <button value="8" id="8" onclick="valueAssign(8);">8</button>
        <button value="9" id="9" onclick="valueAssign(9);">9</button>
            <br/>

        <button value="0" id="0" onclick="valueAssign(0);">0</button>

        <audio>
            <source src="audio/ding.wav">
        </audio>
</body>
</html>

我如何实现间隔暂停并重置以下脚本

0 个答案: