How to Show Client Side Elapsed Timer in Multiple tags

Question

4.00/5 (1 vote)

See more:

HI,

I am new in Asp.net MVC, and currently am doing a project in MVC 3 . And i need to show the Elapsed Time when a div is load. I need the client side Elapsed time in multiple <div> tags.

And i got a Time Elapsed javascript below mentioned. but i cant use this code to show in multiple <div> tags.

For eg : I have four <div> tags. and i have to show the Time Elapsed in these four <div> tags..

XML

<script>
var seconds = null;
var ticker = null;

function startTimer( )
{
    seconds = -1;
    ticker = setInterval("tick( )", 1000);
    tick( );
}

function tick( )
{
    ++seconds;
    var secs = seconds;
    var hrs = Math.floor( secs / 3600 );
    secs %= 3600;
    var mns = Math.floor( secs / 60 );
    secs %= 60;
    var pretty = ( hrs < 10 ? "0" : "" ) + hrs
               + ":" + ( mns < 10 ? "0" : "" ) + mns
               + ":" + ( secs < 10 ? "0" : "" ) + secs;
    document.getElementById("ELAPSED").innerHTML = pretty;
}
</script>
<body onLoad="startTimer( )">
...
The elapsed time is now <span id="ELAPSED"></span>
...
</body>

Can you please help me.......

Thanks and Regards,

Dileep

Posted 24-Jul-12 21:53pm

dilzz

Updated 2-Aug-12 4:32am

v3

Add a Solution

2 solutions

Solution 1

I would suggest to follow below steps:

1) call startTimer( ) in each of the page where you want to show the elapsed timer.

2) In the Tick method pass the span id where you want to show the elapsed time.
So each time you call tick it will show the elapsed time in the given span id.
That span can be in any page and inside any DIV.

Below is the code for tick method.

JavaScript

function tick(spanId )
{
    ++seconds;
    var secs = seconds;
    var hrs = Math.floor( secs / 3600 );
    secs %= 3600;
    var mns = Math.floor( secs / 60 );
    secs %= 60;
    var pretty = ( hrs < 10 ? "0" : "" ) + hrs
               + ":" + ( mns < 10 ? "0" : "" ) + mns
               + ":" + ( secs < 10 ? "0" : "" ) + secs;
    document.getElementById(spanId).innerHTML = pretty;
}

Hope it helped.

Posted 1-Aug-12 5:43am

Rupesh Kumar Tiwari

Comments

dilzz 2-Aug-12 7:49am

Hi,

When i used as u mentioned above. The timer will appear, but it didn't works. Here is the below code that i tried it. please advice me.

<pre lang="xml"><head>

<script>
var seconds = null;
var ticker = null;

function startTimer(spanid) {

seconds = -1;
ticker = setInterval("tick(spanid)", 1000);
tick(spanid);
}

function tick(spanid) {
++seconds;
var secs = seconds;
var hrs = Math.floor(secs / 3600);
secs %= 3600;
var mns = Math.floor(secs / 60);
secs %= 60;
var pretty = (hrs < 10 ? "0" : "") + hrs
+ ":" + (mns < 10 ? "0" : "") + mns
+ ":" + (secs < 10 ? "0" : "") + secs;
document.getElementById(spanid).innerHTML = pretty;
}

</script>
</head>
<body>
<input type="submit" onClick="startTimer('ELAPSED')" /><span id="ELAPSED"></span>
<br />
<input type="submit" onClick="startTimer('ELAPSED1')" /><span id="ELAPSED1"></span>
</body></pre>
<pre lang="HTML"></pre>

Thanks,

Dileep

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Rupesh Kumar Tiwari · Accepted Answer · 2012-08-15T08:05:00

I gave you just a indication but you could not follow me.
If you want it to run with all of your independent timers then you have to play with javascript closure. Please see the below sample its tested and running.

Have a look and let me know if you still not it up and running.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Timer</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" onclick="startTimer('timer1');" value="starttimer1" />
        <span id="timer1"></span>
        <br />
        <input type="button" onclick="startTimer('timer2');" value="starttimer2" />
        <span id="timer2"></span>
    </div>
    </form>
</body>
<script type="text/javascript">
    var startTimer = function (idtimer) {
        var objtimer = document.getElementById(idtimer),
            refreshTimer = showtimer(objtimer);
        setInterval(refreshTimer, 1000);
    }, showtimer = function (objElment) {
        var element = objElment, seconds = -1;
        return function () {
            ++seconds;
            var secs = seconds;
            var hrs = Math.floor(secs / 3600);
            secs %= 3600;
            var mns = Math.floor(secs / 60);
            secs %= 60;
            var pretty = (hrs < 10 ? "0" : "") + hrs + ":" + (mns < 10 ? "0" : "") + mns + ":" + (secs < 10 ? "0" : "") + secs;
            if (element) {
                element.innerHTML = pretty;
            }
        };
    };
</script>
</html>

You can also view the running sample at Fiddle