使用 jQuery 计数器随机计数 1 或 2,并在达到 97 时使用 cookie 保存数字

Counting randomly 1 or 2 up with jQuery counter and use a cookie to save the number when it reaches 97

我是全新的。也许有人可以帮忙?

我正在尝试制作一个计数器,每 X 秒将我的数字递增 0、1 或 2。 该数字将从 87 开始,一直增加到 97。每次增加 0、1 或 2。

如果用户重新加载页面,计数器会继续,当数字达到 97 时,它会停在那里并显示数字 97 - 同样在重新加载时

到目前为止,我已经可以使用了

HTML:

<p id="offer">87</p>

在脚本标签中:

$(document).ready(function () {
    var number = parseInt($('#offer').text()) // Getting my number from the p id


    // Called the function in each second
    var interval = setInterval(function () {
            $('#offer').text(Math.floor(Math.random() * (1 - 0 + 1)) + 1);
        
        if (number > 97) {
            clearInterval(interval); // If exceeded 97, stop
        }
    }, 1000); // Run for each second
});

这就是我尝试将它增加 0、1 或 2 的方法,但这并不完全有效。它显示 0、1 或 2,但不会将其添加到我的号码中。

$(document).ready(function () {
    var number = parseInt($('#offer').text()) // Getting my number from the p id


    // Called the function in each second
    var interval = setInterval(function () {
            $('#offer').text(Math.floor(Math.random() * (1 - 0 + 2)) + 0);
        
        if (number > 97) {
            clearInterval(interval); // If exceeded 97, stop
        }
    }, 1000); // Run for each second
});

我应该在哪里以及如何添加 cookie 部分,以“保存”每个页面加载的数量?

目前您的增量器的问题是您从未将新的随机值添加到现有值;新值自行显示。

为了在发生增量时将值存储在元素中,为了简单起见,我建议使用 localStorage 而不是 cookie。在这种情况下,您需要做的就是设置 localStorage 中的值,因为它在时间间隔内更新,并将该值读入加载元素的文本中。像这样:

jQuery($ => {
  let $offer = $('#offer');
  
  let storedNumber = localStorage.getItem('number') || 87;
  $offer.text(storedNumber);
        
  let interval = setInterval(() => {
    let number = parseInt($offer.text(), 10);
    if (number > 97) {
      clearInterval(interval);
      return;
    }
    
    number += Math.floor(Math.random() * 3);    
    $offer.text(number);
    localStorage.setItem('number', number);
  }, 1000);
});

Working Example - 请注意示例在 Fiddle 中,因为 SO 片段是沙盒化的并且不支持 localStorage。