JavaScriptタイマーが指定された時刻に再開しない

Question

私はこのタイマーを手に入れました。昨日は一時停止機能を実装しましたが、一時停止すると一時停止した時間を記録し、新しいタイマーに再送信しようとしました。一時停止より早く開始します。私は一日中掘り下げていましたが、どこに問題があるのか​​を確かめていました。

助けてください。

P.S. /1000を無視し、私は=異なる目的のためのUNIXタイムスタンプを必要とする）

var timerId; 
 

 
function startTimer(started) { 
 
\t var localTime = new Date()/1000; 
 

 
\t return setInterval(function() { 
 
\t \t var totalSeconds = ((new Date()/1000) - started); 
 
\t \t var hours = Math.floor(totalSeconds/3600); 
 
\t \t totalSeconds = totalSeconds % 3600; 
 

 
\t \t var minutes = Math.floor(totalSeconds/60); 
 
\t \t totalSeconds = totalSeconds % 60; 
 

 
\t \t var seconds = Math.floor(totalSeconds); 
 
\t \t hours = (hours < 10 ? "0" : "") + hours; 
 
\t \t minutes = (minutes < 10 ? "0" : "") + minutes; 
 
\t \t seconds = (seconds < 10 ? "0" : "") + seconds; 
 

 
\t \t var timeString = hours + ":" + minutes + ":" + seconds; 
 

 
\t \t $('.timer .digits').text(timeString); 
 
\t }, 1000); 
 
} 
 

 
$('.start button').click(function() { 
 
\t timerId = startTimer(new Date()/1000); 
 
    $('.start').hide().siblings('.pause').show(); 
 
}); 
 

 
$('.pause button').click(function() { 
 
    var pausedTime = new Date()/1000; 
 
\t clearInterval(timerId); 
 
    $('.timer').data('pausedTime', pausedTime); 
 
    $('.pause').hide().siblings('.resume').show(); 
 
}); 
 

 
$('.resume button').click(function() { 
 
    var pausedTime = $('.timer').data('pausedTime'); 
 
    timerId = startTimer(pausedTime); 
 
    $('.resume').hide().siblings('.pause').show(); 
 
});

.pause, .resume { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='timer'> 
 
    <div class='digits'>00:00:00</div> 
 
    <div class='start'><button>Start</button></div> 
 
    <div class='pause'><button>Pause</button></div> 
 
    <div class='resume'><button>Resume</button></div> 
 
</div>

Answer 1

あなたはこのような何かを探している願っています。これは特定の時間を必要としないタイマーなので、経過時間を維持して再開時に取得するだけです。

var timerId; 
 

 
function startTimer() { 
 
\t var elapsed = ($('.timer').data('pausedTime') | 0) || 0; 
 

 
\t return setInterval(function() { 
 
\t \t var totalSeconds = elapsed; 
 
\t \t var hours = Math.floor(totalSeconds/3600); 
 
\t \t totalSeconds = totalSeconds % 3600; 
 

 
\t \t var minutes = Math.floor(totalSeconds/60); 
 
\t \t totalSeconds = totalSeconds % 60; 
 

 
\t \t var seconds = Math.floor(totalSeconds); 
 
\t \t hours = (hours < 10 ? "0" : "") + hours; 
 
\t \t minutes = (minutes < 10 ? "0" : "") + minutes; 
 
\t \t seconds = (seconds < 10 ? "0" : "") + seconds; 
 

 
\t \t var timeString = hours + ":" + minutes + ":" + seconds; 
 

 
\t \t $('.timer .digits').text(timeString); 
 
     $('.timer').data('pausedTime', ++elapsed); 
 
\t }, 1000); 
 
} 
 

 
$('.start button').click(function() { 
 
    timerId = startTimer(); 
 
    $('.start').hide().siblings('.pause').show(); 
 
}); 
 

 
$('.pause button').click(function() { 
 
    clearInterval(timerId); 
 
    $('.pause').hide().siblings('.resume').show(); 
 
}); 
 

 
$('.resume button').click(function() { 
 
    timerId = startTimer(); 
 
    $('.resume').hide().siblings('.pause').show(); 
 
});

.pause, .resume { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='timer'> 
 
    <div class='digits'>00:00:00</div> 
 
    <div class='start'><button>Start</button></div> 
 
    <div class='pause'><button>Pause</button></div> 
 
    <div class='resume'><button>Resume</button></div> 
 
</div>