Таймер обратного отсчета

Question

Мой проект в php

Я хочу создать таймер обратного отсчета для того, чтобы задать вопрос в течение ограниченного периода времени, например, LMS здесь я использую таймер обратного отсчета JavaScript, но при обновлении страницы таймер JavaScript сбрасывается.

Answer 1

Вы можете сохранить время начала в сеансе php. Затем каждый раз, когда вы загружаете страницу, вы можете продолжать таймер обратного отсчета с помощью JavaScript, например,

<?php
//on every page
session_start();

//when you start
$_SESSION['start_time'] = time();

Тогда на каждой странице:

<script type="text/javascript">
    var startTime = <?php echo $_SESSION['start_time']; ?>;
    //calculate remaining time
</script>

Вам нужно будет следить за тем, когда часовые пояса отличаются или когда часы клиента неверны. Возможно, вместо этого вы могли бы рассчитать оставшееся время в секундах и распечатать его в javascript на каждой странице, но тогда у вас может быть неточность в соединениях с высокой задержкой и т. Д.

Answer 2

Попробуйте что-то вроде:

<?php
   session_start();

   //to reset the saved countdown
   if (!empty($_REQUEST['resetCountdown']))
   {
       unset($_SESSION['startTime']);
   }

   if (empty($_SESSION['startTime']))
   {
       $_SESSION['startTime'] = time();
   }

   //In seconds
   $startTime = time() - $_SESSION['startTime'];
?>
<script type="text/javascript">
var countdown = 60; //in seconds
var startTime = <?php echo $startTime; ?>;

startCountdown(startTime, countdown);

function startCountdown(startFrom, duration)
{
   //countdown implementation
}
</script>

Answer 3

попробуйте

<script>
// Set the date we're counting down to
var countDownDate = new Date("Aug 1, 2017 12:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"

    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s "; 


    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

, а также поместите это под тегом тела.

<p id="demo"></p>

Answer 4

Вы также можете сохранить таймер в переменной сеанса в PHP, чтобы при обновлении страницы время сохранялось.