英文:
Prevent countdown reset on page load
问题
I have a stock counter that works fine, but I would like to prevent the countdown from resetting when the page reloads.
<span class="qty" id="qty"></span>
<script>
var qty = 57
var qtyId = document.getElementById("qty");
setQty(qty);
function setQty(qty)
{
qtyId.innerHTML = qty;
if (qty==0) return;
var parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
var msec = Math.floor(((Math.random() * 15) + 15)*1000);
qty -= parts;
setTimeout(function() {
setQty(qty);
}, msec)
}
</script>
I've tried this based on other scripts, but it doesn't stop the countdown from resetting on page reload.
var qty = 57
var qtyId = document.getElementById("qty");
setQty(qty);
var saved_countdown = localStorage.getItem('saved_countdown');
if(saved_countdown == null) {
// Set the time we're counting down to using the time allowed
time = new_countdown;
localStorage.setItem('saved_countdown', new_countdown);
} else {
time = saved_countdown;
}
function setQty(qty)
{
qtyId.innerHTML = qty;
if (qty==0) return;
var parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
var msec = Math.floor(((Math.random() * 15) + 15)*1000);
qty -= parts;
setTimeout(function() {
setQty(qty);
}, msec)
}
Would anyone here be able to help me out? Thank you!
英文:
I have a stock counter that works fine, but I would like to prevent the countdown from resetting when the page reloads.
<span class="qty" id="qty"></span>
<script>
var qty = 57
var qtyId = document.getElementById("qty");
setQty(qty);
function setQty(qty)
{
qtyId.innerHTML = qty;
if (qty==0) return;
var parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
var msec = Math.floor(((Math.random() * 15) + 15)*1000);
qty -= parts;
setTimeout(function() {
setQty(qty);
}, msec)
}
</script>
I've tried this based on other scripts, but it doesn't stop the countdown from resetting on page reload.
var qty = 57
var qtyId = document.getElementById("qty");
setQty(qty);
var saved_countdown = localStorage.getItem('saved_countdown');
if(saved_countdown == null) {
// Set the time we're counting down to using the time allowed
time = new_countdown;
localStorage.setItem('saved_countdown', new_countdown);
} else {
time = saved_countdown;
}
function setQty(qty)
{
qtyId.innerHTML = qty;
if (qty==0) return;
var parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
var msec = Math.floor(((Math.random() * 15) + 15)*1000);
qty -= parts;
setTimeout(function() {
setQty(qty);
}, msec)
}
Would anyone here be able to help me out? Thank you!
答案1
得分: 1
你的版本不起作用,因为你试图将一个不存在的变量(new_countdown
)分配给time
。我重构了你的代码并解决了这个问题:
<span class="qty" id="qty"></span>
<button id="reset">重置</button>
<script>
const setQty = (qty) => {
qtySpan.innerHTML = qty;
if (qty == 0) return;
let parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
qty -= parts;
// 将更新后的数量保存在localStorage中
localStorage.setItem('saved_countdown', qty);
setTimeout(() => setQty(qty), msec);
}
// 从localStorage中获取保存的倒计时值,如果找不到则使用默认值57
const defaultQty = localStorage.getItem('saved_countdown') ?? 57;
const qtySpan = document.getElementById('qty');
const resetBtn = document.getElementById('reset');
// 为重置按钮添加点击事件侦听器
resetBtn.addEventListener('click', () => {
// 从localStorage中删除保存的倒计时值并刷新页面
localStorage.removeItem('saved_countdown');
location.reload();
});
// 设置数量的初始值
setQty(defaultQty);
</script>
英文:
Your version doesn't work because you're trying to assign a non-existing variable (new_countdown
) to time
. I've refactored your code and fixed the problem:
<span class="qty" id="qty"></span>
<button id="reset">Reset</button>
<script>
const setQty = (qty) => {
qtySpan.innerHTML = qty;
if (qty == 0) return;
let parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
qty -= parts;
// Save the updated quantity in localStorage
localStorage.setItem('saved_countdown', qty);
setTimeout(() => setQty(qty), msec);
}
// Get the saved countdown value from localStorage, or use default value of 57 if not found
const defaultQty = localStorage.getItem('saved_countdown') ?? 57;
const qtySpan = document.getElementById('qty');
const resetBtn = document.getElementById('reset');
// Add a click event listener to the reset button
resetBtn.addEventListener('click', () => {
// Remove the saved countdown value from localStorage and refresh the page
localStorage.removeItem('saved_countdown');
location.reload();
});
// Set the initial value of the quantity
setQty(defaultQty);
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论