-2

私の問題は、タイマーが正しく一時停止しないことです。一時停止を押すと、停止したように見えますが、実際には循環し続け、開始を押すと、一時停止した場所からではなく、到達した場所から続行します。

<div class="stopwatch">
    <span>00:00:00,000</span><br />
    <div class="btn start">play</div>
    <div class="btn pause">pause</div>
    <div class="btn reset">reset</div>
</div>

$(function (){  
    var reload = 1000/60;  
    var timer = null;  
    var startTime = 0;  
    var btn = $('.stopwatch a');  
    var count = $('.stopwatch span');  
    var pause = false;

    $('.pause').click(function (){
        pause = true; 
    });
    $('.start').click(function (){
        pause = false; 
    });
    $('.reset').click(function (){
        return ( (count.text('00:00:00,000')) && (timer = 0) );
    });

    function zero(num, length) {  
        if ( typeof(length) == 'undefined' ) length = 2;  

        while ( num.toString().length < length ) {  
            num = '0' + num;  
        }  
        return num;  
    }  

    function zero_format(time){  
        return zero(time.getUTCHours()) + ':' + zero(time.getMinutes()) + ':' + zero(time.getSeconds()) + ',' + zero(time.getMilliseconds()); 
    }  

    $('.start').click( function (){  
        if ( !timer ){  
            startTime = new Date();  
            timer = setInterval( function (){  
                if ( pause ){
                    return;
                }

                var currentTime = new Date(new Date() - startTime);  
                count.text(zero_format(currentTime));  
            }, reload);
        }
        return false;
    });
});
4

3 に答える 3

1

初めて start が押されたときに作成された datetime との時間差をまだ計算しているため、 startTime 変数を調整する必要があります

于 2013-01-15T13:45:54.567 に答える
0

のハンドラが 2 つあります$('.start')。

これを試してください:ライブデモ

$('.start').click(function (){  
    if ( !timer ){  
        startTime = new Date();  
        timer = setInterval( function (){  
            if ( pause ){
                return;
            }

            var currentTime = new Date(new Date() - startTime);  
            count.text(zero_format(currentTime));  
        }, reload);
    } else {
        pause = false; 
    }

    return false;
});

そしてこれを削除します：

$('.start').click(function (){
    pause = false; 
});

更新 1

ラップ タイマーではなくストップウォッチが必要な場合は、次のコードを使用してください: Live Demo

var savedTime;
var additional = 0;

$('.pause').click(function (){
    savedTime = new Date(); 
    pause = true; 
});

$('.reset').click(function (){
    count.text('00:00:00,000');
    clearInterval(timer);
    timer = null;
    additional = 0;
});

$('.start').click( function (){  
    if ( !timer ){  
              startTime = new Date();  
        timer = setInterval( function (){  
            if ( pause ){
                return;
            }

            currentTime = new Date(new Date() - startTime - additional);  
            count.text(zero_format(currentTime));  
        }, reload);

        pause = false;
    }

    if(pause == true) {
        additional += new Date() - savedTime;
        pause = false; 
    }

   return false;
});
于 2013-01-15T13:46:45.403 に答える
0

外側のスコープにプロモートcurrentTimeし、外側のスコープの最後のティックの時刻も追跡します。currentTime次に、各ティックで、開始からの時間ではなく、最後のティックと現在のティックの差を追加して更新します。そうすれば、適切に一時停止されます。

また、最初の一時停止時に追加し、currentTime再起動時に最後のティックをリセットする必要があります。

于 2013-01-15T13:51:17.367 に答える