Таймер обновляется после перезагрузки страницы браузера - Javascript - PullRequest
Новая
       11

Таймер обновляется после перезагрузки страницы браузера - Javascript

0 голосов
/ 22 октября 2018

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

HTML 

<div class="mdl-card__actions mdl-card--border">
                        <div>Timer : <span  id="time1">05:00</span></div>
                            <div class="mdl-grid">

                            <div class="mdl-layout-spacer"></div>

                                <button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
                            50 coins 
                            </button>
                            <div class="mdl-layout-spacer"></div>
                            </div>

                        </div>

JS 

$("#coinbtn1").click(function() {

    var uid = firebase.auth().currentUser.uid;

    var coinRef = firebase.database().ref().child('users_coins').child(uid).child('coins');

    var counter = 50;

    coinRef.transaction(function (counter) {
      return (counter || 0) + 50;
    }); 

  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer1(fiveMinutes, display);

});

function startTimer1(duration, display) {
  var timer = duration,
    minutes, seconds;


  var intervalFn1 = function() {

    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if(timer-1 != 0){
    document.getElementById('coinbtn1').disabled = true;
  }

  if (timer-1 === 0) {

    clearInterval(myVar1);
    document.getElementById('coinbtn1').disabled = false;

  }

  --timer;


  }

  myVar1 = setInterval(intervalFn1, 900);

  intervalFn1();

}

Код, использованный ранее ... 

$("#coinbtn1").click(function() {

    var uid = firebase.auth().currentUser.uid;

    var coinRef = firebase.database().ref().child('users_coins').child(uid).child('coins');

    var counter = 50;

    coinRef.transaction(function (counter) {
      return (counter || 0) + 50;
    }); 

  /* var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer1(fiveMinutes, display); */

  $time_limit = "2016-08-14 00:10:00"
var d = new Date($time_limit);
var hours = d.getHours(); //00 hours
var minutes = d.getMinutes(); //10 minutes
var seconds = 60 * minutes; // 600seconds

if (typeof(Storage) !== "undefined") {
  if (localStorage.seconds) {
    seconds = localStorage.seconds;
  }
}

function secondPassed() {
  var minutes = Math.round((seconds - 30) / 60);
  console.log(minutes);
  var hours = Math.round((minutes) / 60);
  var remainingSeconds = seconds % 60;
  if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;
  }
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("seconds", seconds);
  }
  document.getElementById('time1').innerHTML = "0" + minutes + ":" + remainingSeconds;

  if (seconds == 0) {
    clearInterval(myVar);
    document.getElementById('time1').innerHTML = "Time Out";
    if (typeof(Storage) !== "undefined") {
      localStorage.removeItem("seconds");
    }
  } else {
    seconds--;
    console.log(seconds);
  }

}
var myVar = setInterval(secondPassed, 900);

});

1 Ответ

0 голосов
/ 22 октября 2018

Возможно, вы захотите сохранять в localStorage каждый раз, когда тикает ваш таймер.Примерно так:

localStorage.setItem('timerValue', timerValue); // assume timerValue is defined

Когда пользователь откроет страницу, вам нужно будет извлечь указанный элемент:

var time = localStorage.getItem('time');

Редактировать:

Я думаю, что ваша проблема может быть связана со следующим кодом: 

if (localStorage.seconds) {
  seconds = localStorage.seconds;
}

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

...