How can i get the total seconds elapsed on a web page before pressing a refresh button or redirecting to another page?

Question

I have used this piece of code for a timer. But I am not able to set up a logic to get the total seconds elapsed on this page before pressing a refresh button or redirecting to another page. I also want to pass the value of total seconds elapsed to my database.

Timer Code:

<html>
<head>
<Script Language="JavaScript">
    var startDate = new Date();
    var startTime = startDate.getTime();
    function seconds_elapsed ()
    {
        var date_now = new Date ();
        var time_now = date_now.getTime ();
        var time_diff = time_now - startTime;
        var seconds_elapsed = Math.floor ( time_diff / 1000 );
        document.display.timeElapsed.value = pad ( seconds_elapsed );
        setTimeout( "seconds_elapsed ()", 1000 );
        return ( seconds_elapsed ); 
    }
    function pad ( num )
    {
        return ( ( num > 9 ) ? num : "0" + num );
    }
</Script>
</head>
<body onLoad="seconds_elapsed()">

<form method="get" name="display" action="timer.php">
<input name="timeElapsed" type="text" size=8>
</form>

</body>
</html>

@SimoneRossaini actually i am making a recommendation page for some arts. So i want to calculate each users viewing time of an art and add up all the times spent by multiple users on viewing an art. That's why i need to store the seconds in a db. — Blackcoder, Dec 27 '19 at 13:21

bill.gates · Answer 1 · 2019-12-27T13:27:45.577

0

Here a small example made with window.performance.now()

 <body onload="startTimer()">
   <button onclick="showElapsedTime()">Show Seconds</button>
 </body>

<script>
var start;
var end;
function startTimer() {
  start = window.performance.now();
  console.log(start);
}

function showElapsedTime() {
  end = window.performance.now();
  var seconds = (end - start) / 1000;
  alert("Time elapsed: " + seconds.toFixed(2) + " seconds");
}
</script>

edited Dec 27 '19 at 13:27

answered Dec 27 '19 at 13:23

bill.gates

14,145
3
19
47

it is not giving any alert box answers – Blackcoder Dec 27 '19 at 13:27
sorry,my mistake. How can i view the calculated value on another page or send it to db? – Blackcoder Dec 27 '19 at 13:29
and also will it work for different different sessions? – Blackcoder Dec 27 '19 at 13:30
this timer works only for this page, after reloading the timer is set to 0 again. if you want to send data to your database you could do it with ajax for example or you create an form and send this to your API endpoint – bill.gates Dec 27 '19 at 13:31
@Ifaruki that is true but if he store with GET how i explaine the variable will have the end second and he will store it success. – Simone Rossaini Dec 27 '19 at 13:54

score 0 · Accepted Answer · answered Dec 27 '19 at 13:28

0

You can do like that :

Second in the page:

   <html>
    <head>
    <Script Language="JavaScript">
      var startTime, endTime;

function start() {
  startTime = new Date();
};

function end() {
  endTime = new Date();
  var timeDiff = endTime - startTime; //in ms
  // strip the ms
  timeDiff /= 1000;

  // get seconds 
  var seconds = Math.round(timeDiff);
  window.location="https://website.com/storetimer.php?second="+seconds;
}
    </Script>
    </head>
    <body onLoad="start()">

    <button onclick="end()">Click me</button>

    </body>

Now in new page store with insert in your db the variable second like:

$second=$_GET['second'];
//insert code

answered Dec 27 '19 at 13:28

Simone Rossaini

8,115
1
13
34

can i work this piece of code for various sessions? – Blackcoder Dec 27 '19 at 13:39
just use $_SESSION['ID'] if user is logged for store it associated with user. – Simone Rossaini Dec 27 '19 at 13:47
if i reload this page, can i still have the elapsed seconds before clicking refresh button on the php page without pressing a button like click me? – Blackcoder Dec 27 '19 at 13:50
if you want have always the timer and set "finish" when user log off just set $_SESSION['time'] when he change page and when he logout store it on db – Simone Rossaini Dec 27 '19 at 13:56
thanks. You have solved my main issue. Just thinking how can i even get the times when the page is refreshed. – Blackcoder Dec 27 '19 at 14:04

score 0 · Answer 3 · answered Dec 27 '19 at 13:34

0

Send an AJAX ping every second, or every time you want.

Or use onunload / onbeforeunload function and send an ajax when leaving. https://stackoverflow.com/questions/4945932/window-onbeforeunload-ajax-request-in-chrome

answered Dec 27 '19 at 13:34

Fabricio

242
1
8

How can i get the total seconds elapsed on a web page before pressing a refresh button or redirecting to another page?

3 Answers3