1

onclick イベントの後に JavaScript 関数をリセットするのに問題があります。「開始」ボタンをクリックすると、カウンターがカウントアップを開始します。しかし、「リセット」ボタンをクリックしても何も起こりません。タイマーを「0:00」にリセットして、もう一度「開始」をクリックするのを待つ必要があります。これが私のコードです：

<script type="text/javascript">
var seconds = 0;
var minutes = 0;

function zeroPad(time) {
    var numZeropad = time + '';
    while(numZeropad.length < 2) {
        numZeropad = "0" + numZeropad;
    }
    return numZeropad;
}

function countSecs() {
    seconds++;

    if (seconds > 59) {
         minutes++;
         seconds = 0;
    }
    document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
}

 function startTimer() {
     action = window.setInterval(countSecs,1000);
 }


function resetTimer() {
    var seconds = 0;
    var minutes = 0;
 }

</script>

<body>
<button onclick = "startTimer()">Start</button>
<div id="timeBox">Time 00:00</div>

<button onclick = "resetTimer">Reset</button>
</body>
4

4 に答える 4

1

clearInterval()メソッドを呼び出します。

function resetTimer() {
   window.clearInterval(action);
 }
于 2012-07-02T13:58:30.753 に答える
1

これはスコープの問題です。関数内で var を使用すると、秒と分がその関数に対してローカルになります。先頭の変数を削除すると、正しい方向に進みます。

function resetTimer() {
  seconds = 0;
  minutes = 0;
}
于 2012-07-02T13:58:48.657 に答える
0

Onclick イベントは、次のような関数を呼び出す必要があります:onclick="resetTimer();"最後に括弧を付けます。を定義しないと、一部のブラウザはボタンのクリックで送信しようとする場合がありますtype="button"。タイマーを停止するためにタイマーをリセットする必要があるとは思わなかったので、停止ボタンを追加しました。

http://jsfiddle.net/iambriansreed/WRdSK/

<button type="button" onclick="startTimer();">Start</button>
<div id="timeBox">Time 00:00</div>

<button type="button" onclick="resetTimer();">Reset</button>
<button type="button" onclick="stopTimer();">Stop</button>

<script>

    window.seconds = 0;
    window.minutes = 0;

    function startTimer() {
        window.action = setInterval(countSecs,1000);
    }
    function resetTimer() {
        seconds = 0;
        minutes = 0;
    }
    function stopTimer() {
        clearInterval(action);        
        seconds = -1;
        minutes = 0;
        countSecs();
    }
    function zeroPad(time) {
        var numZeropad = time + '';
        while(numZeropad.length < 2) {
            numZeropad = "0" + numZeropad;
        }
        return numZeropad;
    }

    function countSecs() {
        seconds++;

        if (seconds > 59) {
             minutes++;
             seconds = 0;
        }
        document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
    }

</script>

</p>

于 2012-07-02T14:03:35.427 に答える
0

コードに 2 つのエラーがあります。

まず、ボタンで()、実際の呼び出しを行うために関数名の後に逃した:

<button onclick = "resetTimer()">Reset</button>

window.clearInterval()次に、 ( MDN docu )を使用して間隔を停止しなかったため、タイマーが延々と進みました。

// just to make it an explicit global variable. already was an implicit one.
var action;

// rest of your code
function resetTimer() {
    // clear the timer
    window.clearInterval( action );
    // reset variables
    var seconds = 0;
    var minutes = 0;
    // update output
    document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
 }

ここで作業フィドルをセットアップしました。

于 2012-07-02T14:00:06.353 に答える