显示随机div

时间:2016-08-29 08:32:37

标签: javascript html random

我正在尝试创建一种假设显示随机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

4 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

试试这个:

<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。

答案 2 :(得分:0)

这将解决您的问题,

如果你想动态帖子数量,你可以做这样的事情,

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/

答案 3 :(得分:0)

  

在下面的代码中,“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