show dynamic time with javascript

Question

I want to show the time which I have in my php variable with the help of Javascript

I am coding an online exam module, where I want to display the total elapsed time

say for example

$time_elapsed // contains the time taken till now from the start of the exam And if I got a div say,

<div id="time"></div>

how can I show the dynamic running time with starting from $time_elapsed after load the window for each question

Please if you guys have an answer for this..

Thanks

Should the time only update after refresh of the page or every second like a clock? And when you answer a question, the page will be refreshed? — WolvDev
– WolvDev, Commented Jul 4, 2012 at 9:48
It should be like; if the total time elapsed is 10.15(10min 15sec)... it should show in the next page after loading the new question 10.16,10.17,10.18 after each sec elaps...yes the page will refresh after each refresh — Rahul TS
– Rahul TS, Commented Jul 4, 2012 at 9:53

Neji · Accepted Answer · 2012-07-04 10:00:00Z

1

hi you can use the following code for the purpose

the javascript will be:

var Timer;
var TotalSeconds,TotalMins, secs;
var elapsedtime ;

function CreateTimer(TimerID, Time) {
        Timer = document.getElementById(TimerID);
        TotalSeconds = Time;
        elapsedtime = 0
        time = Time
        secs = TotalSeconds%60;
        TotalMins = Math.floor(TotalSeconds/60)
        UpdateTimer()
        window.setTimeout("Tick()", 1000);
}

function Tick() {
if(TotalSeconds-elapsedtime>0)
{
    elapsedtime += 1;
    secs = (elapsedtime%60)-60;
    TotalMins = Math.floor(elapsedtime/60)
    UpdateTimer()
    window.setTimeout("Tick()", 1000);
}
else
alert("time up")
}

function UpdateTimer() {
        Timer.innerHTML = TotalMins + ":" + secs;
}

nw create a html div where you want to show the running time.

Html:

<div id='timer' />
<script type="text/javascript">window.onload = CreateTimer("timer", 5);</script>

give parameter the time limit. it will alert after time finishes.

and to get time after refresh of the page use html5's sessionStorage

visit Html5 Storage Doc to get more details. using this you can store intermediate values temporaryly/permanently locally and then access your values for storing values for a session

sessionStorage.getItem('label')
sessionStorage.setItem('value', 'label')

or store values permanently using

localStorage.getItem('label')
localStorage.setItem('value', 'label')

So you can store (temporarily) form data between multiple pages using html5 storage objects

answered Jul 4, 2012 at 10:00

Neji

6,8875 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Taylor Over a year ago

I really don't see why providing someone with full code helps in any way what so ever, its certainly not going to help them learn. They have not even posted any sort of attempt. At most I think we should be giving pointers as to what they should be trying and let them actually try it for themselves.

Rahul TS Over a year ago

Hello Jon, I posted this question. Please dont say like that...if I need to use the above code for my need then I have to learn each and every line of that, and the logic begin those lines, only then I can manipulate it according to my need. I think anyone in any context will have this same experience if they get a strip of code as an example before adapting to their need... Even you may not be able to do anything if you dont know any JS before using this FULL CODE..

Michael Besteck · Accepted Answer · 2012-07-04 10:38:08Z

1

This is how to display dynamic time. To use other php based starting time replace the line time0 = new Date(); by time0 =<?php echo $startTime;?>; which should be in ms since the epoch.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>elapsed time demo</title>
    <script type="text/javascript">
        var time0;
        function initTime() {
            time0 = new Date();
            window.setInterval("updateTime()", 1000);
        }
        function updateTime() {
            var timeNow = new Date();
            var deltas = (Number(timeNow) - Number(time0))/1000;
            var deltah = ("0"+String(Math.round(deltas / 3600))).substr(-2);
            deltah = deltah.substr(-2);
            deltas %= 3600;
            var deltam = ("0"+String(Math.round(deltas / 60))).substr(-2);
            deltas = ("0"+String(Math.round(deltas % 60))).substr(-2);
            document.getElementById("timedisplay").firstChild.data=deltah+":"+deltam+":"+deltas;
        }
    </script>
</head>
<body onload="initTime();">
    <div> elapsed time <span id="timedisplay">00:00:00</span></div>
</body>
</html>

edited Jul 4, 2012 at 10:38

answered Jul 4, 2012 at 10:31

Michael Besteck

2,41918 silver badges11 bronze badges

2 Comments

Rahul TS Over a year ago

I dont get what exactly to give in time0 =<?php echo $startTime;?>; do you mean microsec that elapsed after starting the exam

Rahul TS Over a year ago

can you please have an answer for this above comment

Jon Taylor · Accepted Answer · 2012-07-04 09:48:28Z

0

Your php code should return the time elapsed at the point of loading the page, however, javascript will then take over and increment that time as time passes.

answered Jul 4, 2012 at 9:48

Jon Taylor

7,9255 gold badges32 silver badges55 bronze badges

2 Comments

Rahul TS Over a year ago

My question is how to implement it rather than how the flow should be,... I know when the php page refreshes the variable for time_elapsed will be send to the next question page, and then....how to take that variable to JS and do the rest?

Jon Taylor Over a year ago

Well have you tried anything so far? We're not just going to write code for you. Atleast show us that you have tried for yourself first.

Devendra Shewale · Accepted Answer · 2012-07-04 09:59:14Z

0

You can send the parameter to your JavaScript function which is display time

      function display_time(int time)
      {
        //your code for further integration
      }

You can send the parameter to JavaScript function using following way

      //call the function at the time display time
       display_time(<?php echo $time_elapsed ?>)

answered Jul 4, 2012 at 9:59

Devendra Shewale

4071 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

show dynamic time with javascript

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related