CODEWITHSUNDEEP
phpjavascripthtml
Rahul TS
Rahul TS

Reputation: 1218

show dynamic time with javascript

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

Upvotes: 0

Views: 6876

Answers (4)

Michael Besteck
Michael Besteck

Reputation: 2423

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>​

Upvotes: 1

Neji
Neji

Reputation: 6839

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

Upvotes: 1

Devendra Shewale
Devendra Shewale

Reputation: 407

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 ?>)

Upvotes: 0

Jon Taylor
Jon Taylor

Reputation: 7905

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.

Upvotes: 0

Related Questions