jQuery time counter

javascript jquery

33,231

Solution 1

I knocked up something very simple to satisfy just such a requirement. Get it at https://github.com/robcowie/jquery-stopwatch and see a demo at http://jsfiddle.net/rob_cowie/Pt9nc/

Solution 2

In pure javascript, you can do this, to an extent:

The timer is simple. On page load, store a reference to the current time, and then periodically update some field, showing the difference in time between now and then.
```
var startTime = new Date(),
    outputDiv = document.getElementById('output') // or $('#output').get(0)
;
setInterval(function () {
    outputDiv.innerHTML = "ms since the start: " + (new Date() - startTime);
}, 1000);
```
I'll leave it as an exercise to the reader to fill in the time formatting to mm:ss or whatever.
The page counter is slightly more complicated since Javascript itself doesn't persist between page refreshes. You'll need to find some way to persist the data. The old way would be to use cookies, but with HTML5, a better solution would be to use sessionStorage, which has pretty good browser support. You can read more about it on the Mozilla documentation.

The basic flow would be this:
1. Check for your variable name in sessionStorage (let's say "myPageCounter")
  - if it doesn't exist, the counter value is 0;
  - if it does exist, grab the value
2. Add 1 to the value.
3. Store it back into sessionStorage, ready for the next page load.

Solution 3

Why not using pure javascript timing events.

Some examples here:

http://www.w3schools.com/js/js_timing.asp

Even one that counts in seconds. I have adapted it here below to count minutes as well:

<html>
<head>
<script type="text/javascript">
var c=0;
var minutes= 0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value='minutes:'+ minutes + ' seconds: '+ c;
c=c+1;
if (c%60==0){
minutes+=1;
c=0;
}
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script> 
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>

33,231

Author by

Iladarsda

My interest, in this order.. ✔ JavaScript / OO / MV* ✔ AngularJS ✔ NodeJS ✔ Unit Testing ✔ HTML5/CSS3

Updated on May 13, 2020

Comments

Iladarsda about 4 years
I'm looking for plugin or jQuery to do following:
- count time - in minutes & seconds from 0.
- start count on page load = start counting from 0 every reload
Any help much appreciated.
- nickf almost 13 years
  
  lol @ "pure jQuery"... first time I've heard that expression.
- Iladarsda almost 13 years
  
  @nickf - pure as 'self written'
- katspaugh almost 13 years
  
  Pure must mean no variables besides $.
Iladarsda almost 13 years

Sounds good - but our root kid decide to block this website :|
Iladarsda almost 13 years

I don't need to save the value when going on another page - as data will refresh on page enter(reload/refresh/open new one) - just need to count time from when loaded. ( There will be some live feed to it -e.g. data on the server will be updated every 10 minutes). To get updated data you will need to reload the page.
nickf almost 13 years

@Pete, Reloading the page throws away the javascript context, so you always need some external way to persist the value. Also at the time when you need to store the value, you don't know what the next page will be. Perhaps use some part of the current URL in the variable name. You could also try looking at the referer to see whether the page load was caused by a reload or by a link (and so you'll know when to reset to 0).