显示随机 div 的框答案

【问题标题】：Box that displays random divs显示随机 div 的框
【发布时间】：2016-08-29 08:32:37
【问题描述】：

我正在尝试创建一种假设显示随机 div 的框。例如关于动物的有趣事实。我找到了一些代码，自己编写了一些代码，它是这样工作的： 1.页面加载时随机加载div 2. 每次用户单击按钮时都会加载下一个随机 div：“随机有趣的事实”

在下面的代码中，“随机有趣的事实”按钮只工作一次。我怎样才能让它继续工作？我的意思是我可以点击它 100 次，它会显示 100 个不同的 div。这是我的第二个问题：当使用例如 100 个 div（有很多关于动物的有趣事实）时，下面的代码会很长，有没有更简单的方法来创建循环？有很多滑块，但我找不到我需要的任何东西。任何帮助将不胜感激。

<div id="box">
  <div id="funfact1">
      <p>
      Squirrels plant thousands of new trees each year simply by           forgetting where they put their acorns. </p>
    </div><!-- end funfact1 -->

    <div id="funfact2">
      <p>Macaques in Japan use coins to buy vending machine snacks.       </p>
    </div><!-- end funfact2 -->

    <div id="funfact3">
      <p>Japanese Macaques make snowballs for fun. </p>
    </div><!-- end funfact3 -->

    <div id="funfact4">
      <p>Dogs’ nose prints are as unique as human fingerprints and       can be used to identify them. </p>
    </div><!--end funfact4 -->
    <div id="buttonDiv">
      <button id="buttonShuffle">Random fun fact</button>
     </div><!-- end buttonDiv -->
</div><!-- end div box -->
<script type="text/javascript">
randomNumber = Math.floor(Math.random()*4+1);

window.onload = function() {
    if (randomNumber == 1) {
        document.getElementById("funfact1").style.display = "inline";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber == 2) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "inline";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber == 3) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "inline";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber == 4) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "inline";
    }
}

randomNumber1 = Math.floor(Math.random()*4+1);
    document.getElementById("buttonShuffle").onclick=function() {
    if (randomNumber1 == 1) {
        document.getElementById("funfact1").style.display = "inline";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber1 == 2) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "inline";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber1 == 3) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "inline";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber1 == 4) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "inline";
    }
}

</script>

Fiddle

【问题讨论】：

标签： javascript html random

【解决方案1】：

如果你想保留所有的 div 并编写更少重复的代码，你可以试试这个。一般来说，在编写代码时，尽量识别重复并在函数中导出它们。

window.onload = function() {

  // show random fact on load
  randomFact()

  // show random fact on button click
  document.getElementById("buttonShuffle").addEventListener('click', randomFact)
}

function randomFact () {
  // generate random
  var random =  Math.floor(Math.random() * 4)

  // get all facts
  var funfacts = document.getElementsByClassName('funfact')

  // hide all facts
  for (var i = 0; i < funfacts.length; i++) {
    funfacts[i].style.display = 'none'
  }

  // show one
  funfacts[random].style.display = 'inline'
}

https://jsfiddle.net/kxv7y6x9/

【讨论】：

这是最好的答案！投票超过我的。 :)
谢谢 =) 您还可以在函数中导出随机数生成，该函数返回与前一个不同的随机数。
昆汀——这正是我所需要的。非常感谢。顺便说一句，如何修改返回不同数字的函数？我不会问你是否没有提到这个:)
jsfiddle.net/kxv7y6x9/2。它是通用的，你可以添加你想要的事实数量，如果他们有 funfact 类

【解决方案2】：

试试这个：

<div id="box">
  <p id="funFacts"></p>
</div><!-- end div box -->
<script type="text/javascript">
  var funFacts = [
              'Squirrels plant thousands of new trees each year simply by           forgetting where they put their acorns. ',
              'Macaques in Japan use coins to buy vending machine snacks.      ' ,
              'Japanese Macaques make snowballs for fun. ' ];
  var randomNumber = Math.floor(Math.random() * (funFacts.length-1));

  window.onload = function() {
  document.getElementById('funFact').innerHTML = funFacts[randomNumber];
  };
  document.getElementById("buttonShuffle").onclick=function() {
  var randomNumber1 = Math.floor(Math.random() * (funFacts.length-1));
  document.getElementById('funFact').innerHTML = funFacts[randomNumber1];
}

</script>

您面临的问题是您在函数之外生成 randomNumber1，该函数仅运行一次，而不是在每次调用 buttonShuffle 时生成。您遇到的下一个问题是不要编写许多 div，您可以看到我已经使用一系列 funfacts 解决了这些问题。

【讨论】：

感谢您的解释。我之前尝试过使用数组，但无法正确处理。现在我明白了应该怎么做。
@YoungBuck 是的。如果发现它解决了您的问题，您可以接受答案。它可能会帮助其他人。谢谢。

【解决方案3】：

这将解决您的问题，

如果你想动态发布帖子数，你可以这样做，

HTML，

<div id="box">

    <div class="text">
      <p>Squirrels plant thousands of new trees each year simply by forgetting where they put their acorns</p>
    </div><!-- end funfact1 -->

    <div class="text">
      <p>Macaques in Japan use coins to buy vending machine snacks.</p>
    </div><!-- end funfact2 -->

    <div class="text">
      <p>Japanese Macaques make snowballs for fun.</p>
    </div><!-- end funfact3 -->

    <div class="text">
      <p>Dogs’ nose prints are as unique as human fingerprints and can be used to identify them. </p>
    </div><!--end funfact4 -->

    <div id="buttonDiv">
      <button id="buttonShuffle">Random fun fact</button>
    </div><!-- end buttonDiv -->

</div><!-- end div box -->

Javascript，

var texts = document.getElementsByClassName('text'),
    randomNumber;

function updateNumber(){
   randomNumber = (Math.floor((Math.random() * texts.length) + 1)) - 1;
}

function updateText(){
    updateNumber();
    for (i = 0; i < texts.length; i++) {
      texts[i].style.display = "none";
    }
    texts[randomNumber].style.display = "block";
}

window.onload = function(){
    updateText();
}

document.getElementById('buttonShuffle').onclick = function(){
    updateText();
}

CSS，

#box {
  width: 350px;
  height: 250px;
  border: solid thin blue;
  padding: 10px;
  position: relative;
}
#buttonDiv {
  position: absolute;
  bottom: 10px;
  left: 120px;

}

查看示例：https://jsfiddle.net/xbouf1o2/21/

【讨论】：

【解决方案4】：

在下面的代码中，“随机有趣的事实”按钮只能使用一次。我怎样才能让它连续工作？

发生这种情况的原因是您的randomNumber1 变量只计算了一次。您需要在 onclick 事件中计算随机数。这样，每次单击按钮时，都会生成一个随机数，并显示相关的有趣事实。

当使用例如 100 个 div（有很多关于动物的有趣事实）时，> 下面的代码会很长，有没有一种更简单的方法来创建循环？

首先，您需要从每个有趣的事实中删除 ID，然后添加一个类。现在您可以使用 JS 来获取所有有趣的事实，使用 document.getElementsByClassName(class)。这将返回一个我们可以循环的节点列表。

其次，创建一个函数来为你做洗牌。

function shuffleRandomFunfact(event) {
  // Generate a random number.
  var randomNumber = Math.floor(Math.random() * 4);
  // Loop through the nodelist.
  for (var i = 0; i < funfacts.length; i++) {
    // If the index of the current funfact is the same
    // as the random number.
    if (i === randomNumber)
      funfacts[i].style.display = 'inline';
    // Otherwise ...
    funfacts[i].style.display = 'none';
  }
}

现在，您只需要将上述函数附加到您的事件侦听器。

Fiddle

【讨论】：