How can the output of a timer function in PHP be updated and displayed without causing a complete page refresh?

To update and display the output of a timer function in PHP without causing a complete page refresh, you can use AJAX to make asynchronous requests to the server and update the timer value dynamically on the page. This allows the timer to continue running in the background while only updating the specific element displaying the timer value. 

<?php
// timer.php

// Get the current time
$current_time = time();

// Calculate the elapsed time
$elapsed_time = $current_time - $_POST['start_time'];

// Return the elapsed time in seconds
echo $elapsed_time;
?>
```

```html
<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>Timer</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="timer">0</div>

  <script>
    $(document).ready(function() {
      var startTime = <?php echo time(); ?>;

      setInterval(function() {
        $.ajax({
          type: 'POST',
          url: 'timer.php',
          data: { start_time: startTime },
          success: function(data) {
            $('#timer').text(data);
          }
        });
      }, 1000);
    });
  </script>
</body>
</html>

Keywords

PHP timer function update output display without refresh AJAX

Related Questions