0

我正在运行一个脚本，该脚本在每次刷新页面时随机从数组中加载图像。该脚本以及我在网上看到的所有其他类似脚本的一个不受欢迎的特性是，尽管数组中有 100 多个图像，但它通常会在数组中的所有图像都加载同一个图像之前多次加载被查看。

我想更改脚本以防止在查看数组中的所有图像之前调用两次相同的图像。如果与我在这里采取的方法完全不同的方法更可取，请告诉我。另外，我对 javascript 的理解是不稳定的，所以对如何纠正这个问题的彻底解释将是最有帮助的。

提前致谢

以下是页面来源：

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>

    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <!--[if IE]><link href="css/ie-styles.css" rel="stylesheet" type="text/css"><![endif]-->

    <script type="text/javascript">
    <!--
    var xoxo = new Array(); // Array to hold filenames

            xoxo[0] = "images/portrait/fpo/01.jpg"
            xoxo[1] = "images/portrait/fpo/02.jpg"
            xoxo[2] = "images/portrait/fpo/03.jpg"
            xoxo[3] = "images/portrait/fpo/04.jpg"
            xoxo[4] = "images/portrait/fpo/05.jpg"
            xoxo[5] = "images/portrait/fpo/06.jpg"
            xoxo[6] = "images/portrait/fpo/07.jpg"
            xoxo[7] = "images/portrait/fpo/08.jpg"
            xoxo[8] = "images/portrait/fpo/09.jpg"
            xoxo[9] = "images/portrait/fpo/10.jpg"
            xoxo[10] = "images/portrait/fpo/11.jpg"
            xoxo[11] = "images/portrait/fpo/12.jpg"
            xoxo[12] = "images/portrait/fpo/13.jpg"
            xoxo[13] = "images/portrait/fpo/14.jpg"
            xoxo[14] = "images/portrait/fpo/15.jpg"
            xoxo[15] = "images/portrait/fpo/16.jpg"
            xoxo[16] = "images/portrait/fpo/17.jpg"
            xoxo[17] = "images/portrait/fpo/18.jpg"
            xoxo[18] = "images/portrait/fpo/19.jpg"
            xoxo[19] = "images/portrait/fpo/20.jpg"
            xoxo[20] = "images/portrait/fpo/21.jpg"
            xoxo[21] = "images/portrait/fpo/22.jpg"
            xoxo[22] = "images/portrait/fpo/23.jpg"
            xoxo[23] = "images/portrait/fpo/24.jpg"
            xoxo[24] = "images/portrait/fpo/25.jpg"
            xoxo[25] = "images/portrait/fpo/26.jpg"
            xoxo[26] = "images/portrait/fpo/27.jpg"
            xoxo[27] = "images/portrait/fpo/28.jpg"
            xoxo[28] = "images/portrait/fpo/29.jpg"
            xoxo[29] = "images/portrait/fpo/30.jpg"
            xoxo[30] = "images/portrait/fpo/31.jpg"
            xoxo[31] = "images/portrait/fpo/32.jpg"
            xoxo[32] = "images/portrait/fpo/33.jpg"
            xoxo[33] = "images/portrait/fpo/34.jpg"
            xoxo[34] = "images/portrait/fpo/35.jpg"
            xoxo[35] = "images/portrait/fpo/36.jpg"
            xoxo[36] = "images/portrait/fpo/37.jpg"
            xoxo[37] = "images/portrait/fpo/38.jpg"
            xoxo[38] = "images/portrait/fpo/39.jpg"
            xoxo[39] = "images/portrait/fpo/40.jpg"
            xoxo[40] = "images/portrait/fpo/41.jpg"
            xoxo[41] = "images/portrait/fpo/42.jpg"
            xoxo[42] = "images/portrait/fpo/43.jpg"
            xoxo[43] = "images/portrait/fpo/44.jpg"
            xoxo[44] = "images/portrait/fpo/45.jpg"
            xoxo[45] = "images/portrait/fpo/46.jpg"
            xoxo[46] = "images/portrait/fpo/47.jpg"
            xoxo[47] = "images/portrait/fpo/48.jpg"
            xoxo[48] = "images/portrait/fpo/49.jpg"
            xoxo[49] = "images/portrait/fpo/50.jpg"
            xoxo[50] = "images/portrait/fpo/51.jpg"
            xoxo[51] = "images/portrait/fpo/52.jpg"
            xoxo[52] = "images/portrait/fpo/53.jpg"
            xoxo[53] = "images/portrait/fpo/54.jpg"
            xoxo[54] = "images/portrait/fpo/55.jpg"
            xoxo[55] = "images/portrait/fpo/56.jpg"
            xoxo[56] = "images/portrait/fpo/57.jpg"
            xoxo[57] = "images/portrait/fpo/58.jpg"
            xoxo[58] = "images/portrait/fpo/59.jpg"
            xoxo[59] = "images/portrait/fpo/60.jpg"
            xoxo[60] = "images/portrait/fpo/61.jpg"
            xoxo[61] = "images/portrait/fpo/62.jpg"
            xoxo[62] = "images/portrait/fpo/63.jpg"
            xoxo[63] = "images/portrait/fpo/64.jpg"
            xoxo[64] = "images/portrait/fpo/65.jpg"
            xoxo[65] = "images/portrait/fpo/66.jpg"
            xoxo[66] = "images/portrait/fpo/67.jpg"
            xoxo[67] = "images/portrait/fpo/68.jpg"
            xoxo[68] = "images/portrait/fpo/69.jpg"
            xoxo[69] = "images/fashion/fpo/01.jpg"
            xoxo[70] = "images/fashion/fpo/02.jpg"
            xoxo[71] = "images/fashion/fpo/03.jpg"
            xoxo[72] = "images/fashion/fpo/04.jpg"
            xoxo[73] = "images/fashion/fpo/05.jpg"
            xoxo[74] = "images/fashion/fpo/06.jpg"
            xoxo[75] = "images/fashion/fpo/07.jpg"
            xoxo[76] = "images/fashion/fpo/08.jpg"
            xoxo[77] = "images/fashion/fpo/09.jpg"
            xoxo[78] = "images/fashion/fpo/10.jpg"
            xoxo[79] = "images/fashion/fpo/11.jpg"
            xoxo[80] = "images/fashion/fpo/12.jpg"
            xoxo[81] = "images/fashion/fpo/13.jpg"
            xoxo[82] = "images/fashion/fpo/14.jpg"
            xoxo[83] = "images/fashion/fpo/15.jpg"
            xoxo[84] = "images/fashion/fpo/16.jpg"
            xoxo[85] = "images/fashion/fpo/17.jpg"
            xoxo[86] = "images/fashion/fpo/18.jpg"
            xoxo[87] = "images/fashion/fpo/19.jpg"
            xoxo[88] = "images/fashion/fpo/20.jpg"
            xoxo[89] = "images/fashion/fpo/21.jpg"
            xoxo[90] = "images/fashion/fpo/22.jpg"
            xoxo[91] = "images/fashion/fpo/23.jpg"
            xoxo[92] = "images/fashion/fpo/24.jpg"
            xoxo[93] = "images/fashion/fpo/25.jpg"
            xoxo[94] = "images/fashion/fpo/26.jpg"
            xoxo[95] = "images/fashion/fpo/27.jpg"
            xoxo[96] = "images/fashion/fpo/28.jpg"
            xoxo[97] = "images/fashion/fpo/29.jpg"
            xoxo[98] = "images/fashion/fpo/30.jpg"
            xoxo[99] = "images/fashion/fpo/31.jpg"
            xoxo[100] = "images/fashion/fpo/32.jpg"
            xoxo[101] = "images/fashion/fpo/33.jpg"
            xoxo[102] = "images/fashion/fpo/34.jpg"
            xoxo[103] = "images/fashion/fpo/35.jpg"
            xoxo[104] = "images/fashion/fpo/36.jpg"
            xoxo[105] = "images/fashion/fpo/37.jpg"
            xoxo[106] = "images/fashion/fpo/38.jpg"
            xoxo[107] = "images/fashion/fpo/39.jpg"
            xoxo[108] = "images/fashion/fpo/40.jpg"
            xoxo[109] = "images/fashion/fpo/41.jpg"
            xoxo[110] = "images/fashion/fpo/42.jpg"
            xoxo[111] = "images/fashion/fpo/43.jpg"
            xoxo[112] = "images/fashion/fpo/44.jpg"
            xoxo[113] = "images/fashion/fpo/45.jpg"
            xoxo[114] = "images/fashion/fpo/46.jpg"
            xoxo[115] = "images/fashion/fpo/47.jpg"
            xoxo[116] = "images/fashion/fpo/48.jpg"
            xoxo[117] = "images/fashion/fpo/49.jpg"
            xoxo[118] = "images/fashion/fpo/50.jpg"
            xoxo[119] = "images/fashion/fpo/51.jpg"
            xoxo[120] = "images/fashion/fpo/52.jpg"
            xoxo[121] = "images/fashion/fpo/53.jpg"
            xoxo[122] = "images/fashion/fpo/54.jpg"
            xoxo[123] = "images/fashion/fpo/55.jpg"
            xoxo[124] = "images/fashion/fpo/56.jpg"
            xoxo[125] = "images/fashion/fpo/57.jpg"
            xoxo[126] = "images/fashion/fpo/58.jpg"
            xoxo[127] = "images/fashion/fpo/59.jpg"
            xoxo[128] = "images/fashion/fpo/60.jpg"
            xoxo[129] = "images/fashion/fpo/61.jpg"
            xoxo[130] = "images/fashion/fpo/62.jpg"
            xoxo[131] = "images/fashion/fpo/63.jpg"
            xoxo[132] = "images/fashion/fpo/64.jpg"
            xoxo[133] = "images/fashion/fpo/65.jpg"
            xoxo[134] = "images/fashion/fpo/66.jpg"
            xoxo[135] = "images/fashion/fpo/67.jpg"
            xoxo[136] = "images/fashion/fpo/68.jpg"
            xoxo[137] = "images/fashion/fpo/69.jpg"
            xoxo[138] = "images/children/fpo/01.jpg"
            xoxo[139] = "images/children/fpo/02.jpg"
            xoxo[140] = "images/children/fpo/03.jpg"
            xoxo[141] = "images/children/fpo/04.jpg"
            xoxo[142] = "images/children/fpo/05.jpg"
            xoxo[143] = "images/children/fpo/06.jpg"
            xoxo[144] = "images/children/fpo/07.jpg"
            xoxo[145] = "images/children/fpo/08.jpg"
            xoxo[146] = "images/children/fpo/09.jpg"
            xoxo[147] = "images/children/fpo/10.jpg"
            xoxo[148] = "images/children/fpo/11.jpg"
            xoxo[149] = "images/children/fpo/12.jpg"
            xoxo[150] = "images/children/fpo/13.jpg"
            xoxo[151] = "images/children/fpo/14.jpg"
            xoxo[152] = "images/children/fpo/15.jpg"
            xoxo[153] = "images/children/fpo/16.jpg"
            xoxo[154] = "images/children/fpo/17.jpg"
            xoxo[155] = "images/children/fpo/18.jpg"
            xoxo[156] = "images/children/fpo/19.jpg"
            xoxo[157] = "images/children/fpo/20.jpg"
            xoxo[158] = "images/children/fpo/21.jpg"
            xoxo[159] = "images/children/fpo/22.jpg"
            xoxo[160] = "images/children/fpo/23.jpg"
            xoxo[161] = "images/children/fpo/24.jpg"
            xoxo[162] = "images/children/fpo/25.jpg"
            xoxo[163] = "images/children/fpo/26.jpg"
            xoxo[164] = "images/children/fpo/27.jpg"
            xoxo[165] = "images/children/fpo/28.jpg"
            xoxo[166] = "images/children/fpo/29.jpg"
            xoxo[167] = "images/children/fpo/30.jpg"
            xoxo[168] = "images/children/fpo/31.jpg"
            xoxo[169] = "images/children/fpo/32.jpg"
            xoxo[170] = "images/children/fpo/33.jpg"
            xoxo[171] = "images/children/fpo/34.jpg"
            xoxo[172] = "images/children/fpo/35.jpg"
            xoxo[173] = "images/children/fpo/36.jpg"
            xoxo[174] = "images/children/fpo/37.jpg"

    function pickRandom(range) {
        if (Math.random)
            return Math.round(Math.random() * (range-1));
        else {
            var now = new Date();
            return (now.getTime() / 1000) % range;
        }
    }
    // Write out an IMG tag, using a randomly-chosen image name.
    var choice = pickRandom(xoxo.length);
    // -->
    </script>


    <div class="menu">

            <a style="color:#000000" href="index.html">Index</a><br>
            <a href="portrait/overview.html">Portrait</a><br>
            <a href="fashion/overview.html">Fashion</a><br>
            <a href="children/overview.html">Children</a><br>
            <a href="clients.html">Clients</a><br>
            <a href="contact.html">Contact</a><br>

    </div>

    <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

            <a href="index.html"><script type="text/javascript">document.writeln('<img src="'+xoxo[choice]+'" >');</script></a>

    </td></tr>
    </table>

4

3 回答 3

1

如果您真的想确保在所有图像都显示之前永远不会重复图像，您可以使用 存储已显示的索引列表localstorage。

您可以使用

localStorage['viewedItems'] = JSON.stringify(viewedItems)

将数组保存到localstorage，其中viewedItems （第二个）是包含您已经显示的所有索引的数组的名称。然后你可以使用

JSON.parse(localStorage['viewedItems'])

在每个页面加载时检索数组以查看您已经显示的内容。每次，你都在阅读它，添加一个索引（选择一个索引，直到你得到一个不在这个数组中的索引），然后写它。一旦数组的大小达到您拥有的图像数量，清除它并重新开始。

更新，希望更详细，解释

首先，您viewedItems要从localStorage. 然后像你已经做的那样选择一个随机数，并查看该数字是否存在于viewedItems. 您可以使用indexOf执行此操作。选择一个数字并检查是否存在代码将在一个循环中，所以你一直这样做，直到你找到一个在你的数组中不存在的数字。显示该索引。然后，您可以使用push方法将此索引添加到您的viewedItems数组中。最后，将viewedItems数组保存到localStorage.

伪代码

load viewedItems from localStorage

do
    r = random number
while viewedItems.indexOf(r) > -1

show xoxo[r]

viewedItems.push(r)

save viewedItems to localStorage
于 2012-06-05T21:41:06.787 回答
0

这可能不是最好的解决方案，但不妨试一试。有第二个数组和第一个数组一样大，但让它存储布尔值。第二个数组的索引对应于第一个数组的索引。因此，当脚本给出 24 作为随机数时，它应该从xoxo数组中返回第 25 个图像，并且应该将第二个数组中的第 25 个元素设置为 false。例如：

// assume isAvailable is the array that holds the bools
function pickRandom(range) {
        checkAvailabilities(); // checks to see if all the images have been used
        if (Math.random) {
           while (true) {
               var choice = Math.round(Math.random() * (range-1));
               if (isAvailable[choice]) {
                  isAvailable[choice] = false;
                  return choice;
               }
           }
        }
        else {
            var now = new Date();
            return (now.getTime() / 1000) % range;
        }
}

function checkAvailabilities()
{
   // check if there are still some images that haven't been chosen
   for (var i = 0; i < isAvailable.length; i++)
      if (isAvailable[i])
         return; 
   // all the images have been used, so make all of them available again
   for (var i = 0; i < isAvailable.length; i++)
      isAvailable[i] = true;
}
于 2012-06-05T21:45:33.613 回答
0

由于 JavaScript 数字可以保存超过 50 位的整数，因此 3 个数字可以跟踪 150 个文件。

以下代码提供了用于创建、操作和查询由 50 位数字数组组成的数据结构的函数：

function Set (len) {
  // Establish an array of sufficient 50 bit numbers to hold len bits
  this.bits = new Array (Math.floor ((len + 49) / 50));
  this.len = len;
  // Clear all numbers
  for (var i = this.bits.length; i--;)
    this.bits[i] = 0;
}

Set.prototype.full = function () {
  // Check if all bits of the set at 1
  // First check the relevant bits of the last word
  if (this.bits[this.bits.length - 1] === Math.pow (2, this.len + 1) - 1)
    // Then chec tat all remaining numbers are full
    for (var i = this.bits.length - 1; i--;)
      if (bits[i] !== Math.pow (2, 51) - 1)
        return false;
  return true;
}

Set.prototype.check = function (n) {
  // Return value (0 or 1) of bit n of the set
  var m = n % 50; 
  return Math.floor (this.bits [(n - m) / 50] / Math.pow (2, m)) & 1;
}

Set.prototype.add = function (n) {
  // Set bit n of the set to 1 (unless it is already 1)
  if (!this.check (n)) {
    var m = n % 50; 
    this.bits [(n - m) / 50] += Math.pow (2, m);
    return true;
  }
  return false;
}

Set.prototype.remove = function (n) {
  // Set bit of the set to 0 (unless it is already 0)
  if (this.check (n)) {
    var m = n % 50; 
    this.bits [(n - m) / 50] -= Math.pow (2, m);
    return true;
  }
  return false;
}

Set.prototype.clear = function () {
  // Clear all bitsof the set to 0 
  for (var i = this.bits.length; i--;)
    bits[i] = 0;
}
于 2012-06-05T22:28:36.117 回答