Как продолжать отсчет после refre sh? - PullRequest
Новая
       92

Как продолжать отсчет после refre sh?

0 голосов
/ 27 марта 2020

Я учусь JS и я застрял ... Я хочу создать обратный отсчет (это сделано, мой обратный отсчет работает), который продолжает работать, когда страница перезагружается. Я использовал sessionStorage, чтобы «сохранить» значение обратного отсчета, а также проверить, существует ли sessionStorage при загрузке страницы. Проблема в том, что я не знаю, как продолжать отсчет со значениями, сохраненными в sessionStorage.

Не могли бы вы мне помочь? 

class Timer {

    constructor(secondes, minutes) {
        this.secondes = secondes;
        this.minutes = minutes;
        this.button = document.getElementById("button");
        this.counter = document.getElementById("counter");
        this.storageCheck();
    }

    countdown(minutes) {
        var seconds = this.secondes;
        var mins = this.minutes; 
        var myCounter = this.counter; 
        function tick() {
            var current_minutes = mins-1;
            seconds--;
            myCounter.innerHTML = current_minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
            var duration = sessionStorage.setItem("timer", myCounter.innerHTML);

        if( seconds > 0 ) {
                setTimeout(tick, 1000);
            } else {
                if(mins > 1){
                    countdown(mins-1);           
                }
            }
        }
      tick();
    }

    buttonClick() {
        button.addEventListener("click", () => {
            this.countdown(this.minutes);
        })
    }

    storageCheck() {
        if (sessionStorage.getItem("timer")) {
            // keep the countdown running
        }
    }
}

let newTimer = new Timer(60, 20);
newTimer.buttonClick();
<!DOCTYPE html>
<html>
<head>
	<title>Test Countdown</title>
</head>
<body>

	<div id="counter"></div>
	<button id="button">Run</button>

	<script type="text/javascript" src="countdown.js"></script>

</body>
</html>

enter image description here

Ответы [ 3 ]

0 голосов
/ 27 марта 2020

Вы можете сделать простой трюк, выполнив это 

window.onload = function() {
  let minutes = sessionStorage.getItem("minutes")
  let seconds = sessionStorage.getItem("seconds")
  let newTimer = new Timer(seconds, minutes);
};

И в sessionStorage вместо сохранения всего внутреннего Html храните минуты и секунды, надеюсь, это решит вашу проблему

0 голосов
/ 27 марта 2020

В конструкторе перед инициализацией секунд и минут проверьте, находятся ли они в хранилище. Если их нет, установите только this.secondes = secondes и this.minutes = minutes;

   constructor(secondes, minutes) {
        this.button = document.getElementById("button");
        this.counter = document.getElementById("counter");
        if(!this.storageCheck()){ //check if seconds are mins are stored in storage
            this.secondes = secondes; //if not set mins and sec to value passed in constructor
            this.minutes = minutes;
        }
        else{
          this.countdown(this.minutes);
        }


    }

В функции проверки хранилища проверьте, значения есть, если есть получить значения и установить this.secondes и this.minutes и вернуть true, иначе вернуть false 

  storageCheck() {
        //if both mins and secs exists
        if (sessionStorage.getItem("mins") &&sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes=parseInt(sessionStorage.getItem("mins"));//get min
            this.secondes=parseInt(sessionStorage.getItem("secs"));//get secs
            return true;
        }
        else
          return false;
    }

и в функции обратного отсчета сохранить значения в хранилище 

sessionStorage.setItem("mins",vm.minutes);//set current min
            sessionStorage.setItem("secs",vm.secondes);//set current sec

Попробуйте запустить это здесь: https://jsbin.com/bavexigute/1/edit?html, js, консоль, выход 

  class Timer {

    constructor(secondes, minutes) {
      this.button = document.getElementById("button");
      this.counter = document.getElementById("counter");
      if(!this.storageCheck()){ //check if seconds are mins are stored in storage
        this.secondes = secondes; //if not set mins and sec to value passed in constructor
        this.minutes = minutes;
       }
       else{
      this.countdown();
      }
    }

     countdown() {

       debugger;
       var vm=this;
        if(!(this.minutes-1<0))
           this.minutes--;
       let tick= function(){

           vm.secondes--
           if(vm.secondes==0){
              vm.secondes=59;
              vm.minutes--;
           }
           vm.counter.innerHTML =  vm.minutes + ":" + (vm.secondes < 10 ? "0" : "") + vm.secondes;
           if(vm.minutes == 0 && vm.secondes-1==0){
            vm.secondes--; 
            vm.counter.innerHTML =  vm.minutes + ":" + vm.secondes-1;

            }    
           else{
             setTimeout(tick,1000);
           }
           sessionStorage.setItem("mins",vm.minutes);//set current min
           sessionStorage.setItem("secs", vm.secondes);//set current sec
         }
        setTimeout(tick,1000);
     }    



    buttonClick() {
        button.addEventListener("click", () => {
            this.countdown();
        })
    }

    storageCheck() {
        //if both mins and secs exists
        if (sessionStorage.getItem("mins") && sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes=parseInt(sessionStorage.getItem("mins"));//get min
            this.secondes=parseInt(sessionStorage.getItem("secs"));//get secs
            return true;
        }
        else
          return false;
    }

}

let newTimer = new Timer(60, 20);
newTimer.buttonClick();
0 голосов
/ 27 марта 2020

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

constructor(mins, secs) {
  this.mins = mins
  this.secs = secs
  this.checkStorage = this.checkStorage.bind(this)
  this.checkStorage(mins, secs)
}
checkStorage(mins, secs) {
  if(window.storage) { // or whatever
    this.secs = window.storage.secs
    this.mins = window.storage.mins
  }
}

Что-то в этом роде. Обычно функция setStorage изменяет значения, заданные в конструкторе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...