Таймер Javascript уже работает только при обновлении время повторяется, как предотвратить повторение времени - PullRequest
Новая
       17

Таймер Javascript уже работает только при обновлении время повторяется, как предотвратить повторение времени

0 голосов
/ 03 ноября 2019

Привет, ребята, у меня есть проект, и у меня есть проблемы в создании моего проекта. Я уже сделал код для таймера экзамена, и он успешно отсчитал время. проблема, с которой я столкнулся, когда я обновил веб-страницу, таймер вернулся к первоначальному расчету. Пожалуйста, помогите мне, как это исправить. Я использую Laravel Framework. 

var upgradeTime= {{$d->time*60}};
var seconds = upgradeTime;

function timer() {
  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('time').innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    alert('Waktu habis.');
    document.getElementById("regForm").submit();
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);

Ответы [ 2 ]

0 голосов
/ 03 ноября 2019

Чтобы добиться этого, вы можете сохранить свое текущее время в хранилище, а также использовать его из своих (при наличии). 

var upgradeTime= {{$d->time*60}};
var seconds = upgradeTime;
var prevSeconds = localStorage.getItem('timerSeconds');

// assign prev seconds to current seconds.
if(prevSeconds){
 seconds = prevSeconds
}


function timer() {

  // set seconds into local storage
  localStorage.setItem('timerSeconds', seconds);

  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('time').innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    alert('Waktu habis.');
    document.getElementById("regForm").submit();
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);

Надеюсь, это поможет вам.

0 голосов
/ 03 ноября 2019

Если вы хотите, чтобы ваш таймер обратного отсчета продолжался при обновлении страницы, вам следует сохранить «оставшееся время» где-нибудь: вы можете сохранить его в своем cookie-файле или в локальном хранилище с помощью javascript или вы можете отправить запрос ajax исохраните его на своем сервере.

Для решения JS в cookie вы можете сделать что-то вроде этого: (для функций setCookie и getCookie см. этот вопрос ). 

    var upgradeTime= {{$d->time*60}};

    var seconds;
    var countdownTimer;

    function timer() {
        /// YOUR TIMER CODE HERE
        /// JUST store the remaining time in cookie at the end:
        setCookie('remainingTime', seconds, 1);
    }

    $(document).ready(function () {
        var remainingTime = 0;
        if (getCookie('remainingTime')) {
            //get from cookie if it was previously stored
            remainingTime = getCookie('remainingTime');
            console.log(getCookie('remainingTime'));
        } else {           
            //use the default value
            remainingTime = upgradeTime;
            setCookie('remainingTime', remainingTime, 1);
        }
        if (remainingTime > 1) {
            seconds = remainingTime;
            countdownTimer = setInterval(timer, remainingTime);
        }
    });
...