阻止页面加载时的倒计时重置

huangapple go评论61阅读模式
英文:

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.

&lt;span class=&quot;qty&quot; id=&quot;qty&quot;&gt;&lt;/span&gt;

&lt;script&gt;
    var qty = 57
    var qtyId = document.getElementById(&quot;qty&quot;);

    setQty(qty);

    function setQty(qty)
    {
        qtyId.innerHTML = qty;

        if (qty==0) return;

        var parts = Math.floor((Math.random() * 3) + 1);
        if (parts &gt; qty) parts = qty;

        var msec =  Math.floor(((Math.random() * 15) + 15)*1000);

        qty -= parts;

        setTimeout(function() {
            setQty(qty);
        }, msec)
    }
&lt;/script&gt; 

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(&quot;qty&quot;);

    setQty(qty);
    
        var saved_countdown = localStorage.getItem(&#39;saved_countdown&#39;);

    if(saved_countdown == null) {
        // Set the time we&#39;re counting down to using the time allowed

        time = new_countdown;
        localStorage.setItem(&#39;saved_countdown&#39;, 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 &gt; 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:

&lt;span class=&quot;qty&quot; id=&quot;qty&quot;&gt;&lt;/span&gt;
&lt;button id=&quot;reset&quot;&gt;Reset&lt;/button&gt;

&lt;script&gt;
    const setQty = (qty) =&gt; {
        qtySpan.innerHTML = qty;

        if (qty == 0) return;

        let parts = Math.floor((Math.random() * 3) + 1);
        if (parts &gt; qty) parts = qty;

        const msec =  Math.floor(((Math.random() * 15) + 15) * 1000);
        qty -= parts;

        // Save the updated quantity in localStorage
        localStorage.setItem(&#39;saved_countdown&#39;, qty);

        setTimeout(() =&gt; setQty(qty), msec);
    }

    // Get the saved countdown value from localStorage, or use default value of 57 if not found
    const defaultQty = localStorage.getItem(&#39;saved_countdown&#39;) ?? 57;
    
    const qtySpan = document.getElementById(&#39;qty&#39;);
    const resetBtn = document.getElementById(&#39;reset&#39;);

    // Add a click event listener to the reset button
    resetBtn.addEventListener(&#39;click&#39;, () =&gt; {
        // Remove the saved countdown value from localStorage and refresh the page
        localStorage.removeItem(&#39;saved_countdown&#39;);
        location.reload();
    });

    // Set the initial value of the quantity
    setQty(defaultQty);
&lt;/script&gt;

huangapple
  • 本文由 发表于 2023年5月29日 22:04:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76358029.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定