Question

几天前，我在这个平台上的人们的帮助下建立了一个倒数计时器。我对此表示感谢。但是我遇到了另一个问题。当我刷新页面时，整个计时器将重置，并且一切恢复正常。我查了一下，发现我需要将几秒钟存储在称为浏览器的本地存储中。但是，如何在我的代码中实现它是一个问题。像我这样的类似问题有不同的解决方法。我尝试将其更改为他们的，但刷新页面时未显示计时器，必须禁用时启用了按钮。请帮忙。

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);

});

Answer 1

您可能想在每次计时器计时时将其保存到localStorage。像这样：

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

用户打开页面时，您需要检索所述项目：

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

编辑：

我认为您的问题可能出在以下代码上：

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

在设置之前，您正在检查localStorage是否具有名为seconds的属性，但是第一次尝试保存seconds时，该属性始终是不确定的。

重新加载浏览器页面后计时器刷新-Javascript

1 个答案: