javascript - 每个项目的不同随机数

Question

此代码将 1 个数字 保存在 localstorage 中，并生成数字的时间，1 分钟后，项目在 localstorage 中更改并显示在 htm 中。

我正在寻找一种为每个具有 ID 的项目生成 1 个数字的方法

例子:

<div id="now">1 now</div>
<div id="now">5 now</div>
<div id="now">8 now</div>

此时它是这样显示的

<div id="now">1 now</div>
<div id="now">1 now</div>
<div id="now">1 now</div>

我的代码

 <div id="now"></div>

---

function hasOneDayPassed() {
  var lastclear = localStorage.getItem('lastclear'),
    now_p = localStorage.getItem('now_p'),
    time_now = (new Date()).getTime();

  if ((time_now - lastclear) > 1000 * 60) {
    localStorage.clear();
    localStorage.setItem('lastclear', time_now);
    localStorage.setItem('now_p', Math.floor(Math.random() * 20) + 4);
  }
  $('#now').text(now_p + ' now');
}
hasOneDayPassed();

Answer 1

您可以使用 jQuery .each() 函数遍历类名为 .now-people 的所有元素。请注意，我说的是 class，因为您不能有多个具有相同 id 的元素，而您可以有多个具有相同 class 的元素.

这是一个例子:

注意:我注释掉了 localStorage(它在 SO 上不能正常工作)所以我们可以测试 randoms。最后我们将所有值的 array 传递给localStorage 项 now_p。

function hasOneDayPassed()
{
    // var lastclear = localStorage.getItem('lastclear');
    
    var now_p = [];
    
    // check if localStorage item is set
    //if (localStorage.getItem('now_p') !== null)
    //{
    //     now_p = JSON.parse(localStorage.getItem('now_p'));
    //}
    
    // the values of localStorage variable now_p are in the array now_p, to use-> now_p[0], now_p[1] ,...
    
    var rand;
    var time_now = (new Date()).getTime();

/*
    if ((time_now - lastclear) > 1000 * 60)
    {
      localStorage.clear();
      localStorage.setItem('lastclear', time_now);
*/
      $('.now-people').each(function()
      {
          rand = Math.floor(Math.random() * 20) + 4;
          this.innerHTML = rand + ' now';
          now_p.push(this.innerHTML);
      });
/*    
      localStorage.setItem('now_p', JSON.stringify(now_p));
    }
*/

// example of mamnaging data input from localStorage
var testJSON = JSON.parse( JSON.stringify(now_p) );
// example output
console.log(testJSON);
console.log(testJSON[1]);
}

hasOneDayPassed();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="now-people">1 now</div>
<div class="now-people">5 now</div>
<div class="now-people">8 now</div>