javacriptでカウントアップタイマーを作成する

Question

javascriptでカウントアップする簡単なタイマーを作りたいと思っています。私のアヤックスが正常に実行されると、それが起動する必要があり、その結果がこの

1 sec ago 
2 sec ago 
. 
. 
1 min ago (for 60 sec) 
2 min ago (for 60 sec) 
... and so on 

ようにする必要があり、私はグーグルと私はそのようなタイマーを見つけることができません。助言がありますか？

Answer 1

これは、（数秒でタブを保持するために使用された）カウンタが60未満かどうかをチェックすることによって行うことができます。それが60より大きい場合は、単純に60で割ります。floatの値をintに変更して分を得ることができます。 ヒント：あなたがあなたの代わりにparseInt

のtoFixed(2)機能を使用することができますsecs秒XX件まで正確な分を必要とする場合はここで解決

var elem = $('span'); 
 
var count = 0; 
 
setInterval(function() { 
 
    if (count > 60) { // We check if the timer is in seconds or mins 
 
    var time = ++count; // We get a copy of the time in 'seconds' 
 
    time = parseInt(time/60); // We convert it to mins 
 
    $(elem).text(time + 'm'); 
 
    } else { // Simmilarly we can also add a condition to check hours with s=3600 
 
    $(elem).text(++count + 's'); 
 
    } 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <span>0</span> ago... 
 
</p>

Answer 2

は、以下のコードで試してみてくださいです。助けがあれば答えをアップアップしてください。

var counter = 0; 
 
var _minute = 60; 
 
var _hour = 3600; 
 

 
setInterval(function(){ 
 
\t \t counter++; 
 
    
 
\t \t if(counter > (_minute-1) && counter < (_hour-1)){ 
 
    \t \t $('div#show-count').html(Math.floor(counter/_minute) + ' minute ago'); 
 
    }else if(counter > _hour){ 
 
    \t \t $('div#show-count').html(Math.floor(counter/_hour) + ' hour ago'); 
 
    }else{ 
 
    \t \t $('div#show-count').html(counter + ' sec ago'); 
 
    } 
 
    
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="show-count"></div>

Answer 3

あなたのコードに実装するのに十分適応する必要があり、次のコードを参照してください。

// save the current time on load to use for compairing. 
 
var savedTime = new Date(); 
 
// save the timers object into a variable for speed when referencing 
 
var timer = $('#timer'); 
 
// declare timer var 
 
var timerInterval; 
 

 
function startTimer() { 
 
    // save the timer into a variable called timerInterval so we can stop it later 
 
    timerInterval = setInterval(function() { 
 

 
    // save the time difference into a var for reference 
 
    var time = time_diff(savedTime); 
 

 
    // set the spans text to the timer text. 
 
    timer.text(time); 
 

 
    // call to function after 30 seconds to stop timer 
 
    if (parseInt(time) == 30) stopTimer(); 
 

 
    }, 1000); // 1000 = 1 second, 2000 = 2 seconds etc ...; 
 
} 
 

 
// function to stop timer if needed 
 
function stopTimer() { 
 
    clearInterval(timerInterval); 
 
} 
 

 
// function to work out the difference in time by milliseconds. 
 
function time_diff(time) { 
 
    var diff = new Date() - time; 
 
    var msec = diff; 
 
    var hh = Math.floor(msec/1000/60/60); 
 
    msec -= hh * 1000 * 60 * 60; 
 
    var mm = Math.floor(msec/1000/60); 
 
    msec -= mm * 1000 * 60; 
 
    var ss = Math.floor(msec/1000); 
 
    msec -= ss * 1000; 
 
    if (hh > 0) { 
 
    var uom = (hh == 1) ? "hour" : "hours"; 
 
    return hh + " " + uom; 
 
    } 
 
    if (hh < 1 && mm > 0) { 
 
    var uom = (mm == 1) ? "minute" : "minutess"; 
 
    return mm + " " + uom; 
 
    } 
 
    if (hh < 1 && mm < 1) { 
 
    var uom = (ss == 1) ? "second" : "seconds"; 
 
    return ss + " " + uom; 
 
    } 
 
} 
 

 

 
// click event to stop timer. 
 
$(document).on('click','#stopTimer',function(e){ 
 
    stopTimer(); 
 
}); 
 

 
$(document).on('click','#startTimer',function(e){ 
 
    startTimer(); 
 
}); 
 

 
$(document).on('click','#resetTimer',function(e){ 
 
    savedTime = new Date(); 
 
    timer.text('0 seconds'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Timer : <span id="timer">0 seconds</span></p> 
 
<p><button id="startTimer">Start Timer</button><button id="stopTimer">Stop Timer</button><button id="resetTimer">Reset Timer</button></p>