javascript - Onclick更改HTML5本地存储值

我正在通过此代码使用倒数计时器。如果页面刷新或重新加载，则不应为此重置计数，因为我正在使用localstorage进行计数。如果有其他替代解决方法，请提出建议。

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。例如，如果在5点单击一个按钮，则倒数时间从10计数到0，则必须将计数重置为0。这仅对我不起作用。

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

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

Fiddle Link

提前致谢。

最佳答案

好吧...这里的目标是使倒数“设置为零”按钮起作用。

由于SO代码段不允许使用localStorage，因此工作脚本位于CodePen上。

主要问题不是在全局范围内声明了value。
请参阅代码中的说明。

// 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()中将其设置为零，间隔的下一次迭代就可以完成剩下的工作。

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

关于javascript - Onclick更改HTML5本地存储值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51532603/