Question

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

在下面的代码中，“Rundom fun facts”按钮只能运行一次。我怎样才能让它连续工作？我的意思是我可以点击它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

Answer 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/

Answer 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。你遇到的另一个问题是没有写一些你可以看到我使用funfacts数组解决过的div。

Answer 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/

Answer 4

在下面的代码中，“Random fun facts”按钮只能运行一次。如何使＆gt;连续工作？

发生这种情况的原因是因为您的@echo off for /F "skip=3 delims=" %%i in (App.Config) do echo %%i&goto nextline :nextline变量计算一次。您需要在onclick事件中计算随机数。这样，每次单击该按钮时，都会生成一个随机数，并显示相关的有趣事实。

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

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

其次，创建一个能为你洗牌的功能。

document.getElementsByClassName(class)

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

Fiddle

显示随机div

4 个答案: