1

ボタンがクリックされてからの時間をカウントできるストップウォッチを自分のサイトに作成しようとしています。次に、別のボタンをクリックしてタイマーを停止し、経過時間を変数に保存できるようにしたいと考えています。

私は現在、タイマーを停止できることに固執していますか?

私が読んだすべては、clearIntervalがタイマーを停止することを示唆しているようですが、明らかに適切に実装していません。以下のコード (このフィドルでも利用可能) に基づいて、どこが間違っているのでしょうか。

HTML

    <span id="start-counter">start counter</span>
    <span id="stop-counter">stop counter</span>
    <span id="counter"></span>

JS

    $("#start-counter").on("click", function(event){
    var pageVisisted = new Date();

    var test= setInterval(function() {
        var timeOnSite = new Date() - pageVisisted;
        var secondsTotal = timeOnSite / 1000;
        var minutes = Math.floor(secondsTotal / 60) % 3600;
        var seconds = Math.floor(secondsTotal)  % 60;

        document.getElementById('counter').innerHTML = minutes + ":" + seconds;
    }, 1000);
    });

    $("#stop-counter").on("click", function(event){
        //double check onclick is working
        //alert('test');
        clearInterval(test);
    });
4

3 に答える 3

3

ワーキングデモ--> http://jsfiddle.net/pyRz9/

test外側のスコープで定義する

var test;
$("#start-counter").on("click", function (event) {
    var pageVisisted = new Date();

    test = setInterval(function () {
        var timeOnSite = new Date() - pageVisisted;
        var secondsTotal = timeOnSite / 1000;
        var minutes = Math.floor(secondsTotal / 60) % 3600;
        var seconds = Math.floor(secondsTotal) % 60;

        document.getElementById('counter').innerHTML = minutes + ":" + seconds;
    }, 1000);
});

$("#stop-counter").on("click", function (event) {
    //double check onclick is working
    //alert('test');
    clearInterval(test);
});
于 2013-05-20T13:08:49.647 に答える
0

そんなことしないで

変化する：

var minutes = Math.floor(secondsTotal / 60) % 3600;

に：

var minutes = Math.floor(secondsTotal / 60) % 60;
于 2014-06-30T10:50:16.053 に答える