Databases
StackOverflow2013
Postsdbo
POHow to create a count up timer in a text input?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a count up timer in a text input?
    text
    copied!<p>Below I have a javascript count down timer which works fine:</p> <pre><code> &lt;h1&gt;&lt;span id='countdown'&gt;&lt;?php echo $dbSessionDuration; ?&gt;&lt;/span&gt;&lt;/h1&gt; ... $(document).ready(function() { var time = &lt;?php echo json_encode($dbSessionDuration); ?&gt;, parts = time.split(':'), hours = +parts[0], minutes = +parts[1], seconds = +parts[2], span = $('#countdown'); function correctNum(num) { return (num&lt;10)? ("0"+num):num; } var timer = setInterval(function(){ seconds--; if(seconds == -1) { seconds = 59; minutes--; if(minutes == -1) { minutes = 59; hours--; if(hours==-1) { alert("timer finished"); clearInterval(timer); return; } } } span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds)); }, 1000); }); </code></pre> <p>Now what I thought of doing is use the example above and manipulate it to now do the opposite and create a count up timer starting with 00:00:00 (hours, mins, secs).</p> <p>But issue is that it is not working. Nothing is happening. I don't know if I need an hours in the function below because as its a countup, the hours could go up to as many hours as it wants. But my question is how can the count up timer be fixed so that it is fully working?</p> <pre><code>&lt;p&gt;&lt;input type='text' class='responseTime' name='responsetime' value='00:00:00' /&gt;&lt;/p&gt; ... $(document).ready(function() { var response = "00:00:00", parts = time.split(':'), hours = +parts[0], minutes = +parts[1], seconds = +parts[2], input = $('.responseTime'); function correctResponse(responsenum) { return (responsenum&lt;10)? ("0"+responsenum):responsenum; } var responsetimer = setInterval(function(){ seconds--; if(seconds == +59) { seconds = 00; minutes--; if(minutes == +59) { minutes = 00; hours--; return; } } input.text(correctResponse(hours) + ":" + correctResponse(minutes) + ":" + correctResponse(seconds)); }, 1000); }); </code></pre> <p><strong>UPDATE:</strong></p> <p>Also as a side note I realised that the countdown timer I believe is counting down every 2 second for every second. How can this be sorted for the count down timer and included in the count up timer?</p> <p>The code below I have changed to include increment ++ and to include .val rather than .text but what is happening is that it starts with 00:00:00 and then it just drops down to 00:59:60 and then just stops:</p> <pre><code>var response = "00:00:00", parts = time.split(':'), hours = +parts[0], minutes = +parts[1], seconds = +parts[2], input = $('.responseTime'); function correctResponse(responsenum) { return (responsenum&lt;10)? ("0"+responsenum):responsenum; } var responsetimer = setInterval(function(){ seconds++; if(seconds == +59) { seconds = 00; minutes++; if(minutes == +59) { minutes = 00; hours++; return; } } input.val(correctResponse(hours) + ":" + correctResponse(minutes) + ":" + correctResponse(seconds)); }, 1000); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload