Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery MVC3 ASP.NET4.0
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..
 

 
<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 22:53pm
dilzz1.2K
Edited 2-Aug-12 5:32am
v3
Rate this: bad
good
Please Sign up or sign in to vote.

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.
 
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.
  Permalink  
Comments
dileepkumarpd at 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
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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 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
  Permalink  
v2
Comments
dileepkumarpd at 16-Aug-12 2:50am
   
Thank you Sir, Thanks a lot........

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

  Print Answers RSS
0 OriginalGriff 7,903
1 Sergey Alexandrovich Kryukov 7,142
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,820


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 15 Aug 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100