javascript - Onclick更改HTML5本地存储值

Question

我正在通过这段代码使用倒计时器。如果页面刷新或重新加载，则不应重置计数，因为我正在从本地存储使用此计数。如果有任何替代解决方案，请建议我。

var hms = $(".div__time .total_time").text();
var a = hms.split(':');
var hrs_min_sec = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);

var time_hrs_min_sec = hrs_min_sec;
if (localStorage.getItem("counter")) {
  if (localStorage.getItem("counter") <= 0) {
    var value = time_hrs_min_sec;
  } else {
    var value = localStorage.getItem("counter");
  }
} else {
  var value = time_hrs_min_sec;
}

document.getElementById('overall_time').innerHTML = value;

var counter = function() {
  if (value <= 0) {
    localStorage.setItem("counter", time_hrs_min_sec);
  } else {
    value = parseInt(value) - 1;
    console.log(value);
    localStorage.setItem("counter", value);
  }
  document.getElementById('overall_time').innerHTML = value;


  if (value == 0) {
    // var redirect_url = "<?php echo site_url('home'); ?>";
    // window.location.href = redirect_url;
  }

  var hours = Math.floor(value / 3600);
  var minutes = Math.floor(value % 3600 / 60);
  var seconds = Math.floor(value % 3600 % 60);
  var red_time = hours + ' : ' + minutes + ' : ' + seconds;
  document.getElementById('overall_times').innerHTML = red_time;
};
var interval = setInterval(function() {
  counter();
}, 1000);

#overall_time {
  display: none;
}

.div__time,
.total_time,
#overall_times {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div__time">
  <div id="overall_time"></div>
  <div id="overall_times"></div> /
  <div class="total_time">
    00:00:10
  </div>
</div>
<button onclick="start_over_all_time(this);" id="over_all_time">Over All Time</button>

这个工作正常。

当我单击按钮时，我需要将倒计时值重置为 0。例如，如果倒计时时间从 10 计数到 0，如果在计数 5 处单击按钮，则计数必须重置为 0。这一点不为我工作。

我使用此代码来重置本地存储值

function start_over_all_time(button) {
    var inputElemnets = '0';
    localStorage.setItem("value", inputElemnets);
    console.log(value);
}

Fiddle Link

提前致谢。

Answer 1

好的...这里的目标是使倒计时“设置为零”按钮正常工作。

由于 SO 代码片段不允许 localStorage，因此工作脚本位于 CodePen .

主要问题是没有在全局范围内声明值。
请参阅代码中的说明。

// I removed the 3 lines below because that was the only use of jQuery afer all...
// And because the math is weird to read (and incorrect).

//var hms = $(".div__time .total_time").text();
//var a = hms.split(':');
//var hrs_min_sec = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);

// Replaced by this:
var hms = document.querySelector(".total_time").innerHTML;
var hms_arr = hms.split(":");
var time_hrs_min_sec = (hms_arr[0]*3600) + (hms_arr[1]*60) + hms_arr[2];

// Declare the "value" used in almost all functions at the global scope.    
var value;

if (localStorage.getItem("counter")) {
  if (localStorage.getItem("counter") <= 0) {
    value = time_hrs_min_sec;  // Removed the var
  } else {
    value = localStorage.getItem("counter");  // Removed the var
  }
} else {
  value = time_hrs_min_sec;  // Removed the var
}

document.getElementById('overall_time').innerHTML = value;

var counter = function() {
  if (value <= 0) {
    localStorage.setItem("counter", time_hrs_min_sec);
  } else {
    value = parseInt(value) - 1;
    console.log(value);
    localStorage.setItem("counter", value);
  }
  document.getElementById('overall_time').innerHTML = value;


  if (value == 0) {
    // var redirect_url = "<?php echo site_url('home'); ?>";
    // window.location.href = redirect_url;
  }

  var hours = Math.floor(value / 3600);
  var minutes = Math.floor(value % 3600 / 60);
  var seconds = Math.floor(value % 3600 % 60);
  var red_time = hours + ' : ' + minutes + ' : ' + seconds;
  document.getElementById('overall_times').innerHTML = red_time;
};
var interval = setInterval(function() {
  counter();
}, 1000);

// Use value here... Instead of inputElemnets
function start_over_all_time(button) {
  value = 0;
  localStorage.setItem("counter", value);
  console.log(value);
  // Be cool with the browser and stop the interval.
  setTimeout(function(){
    clearInterval(interval);
  },1000);
}

现在设置为零按钮可以工作...因为您在任何地方都使用 value 变量。因此，一旦您在 start_over_all_time() 中将其设置为零，间隔的下一次迭代将完成其余的工作。

还有很多其他问题需要解决...但那是你的问题。