jQuery - 随机元素显示一段时间答案

【问题标题】：jQuery - Random elements showing for a certain timejQuery - 随机元素显示一段时间
【发布时间】：2017-06-07 05:08:04
【问题描述】：

我想制作一个div，其中div 的一个元素在短时间内随机变化（即：这是巴黎，这是一个苹果等）

我有这行 HTML：

<div id="A">
  THIS IS
</div>

<div id="B">
  <div>AN APPLE</div>
  <div>PARIS</div>
  <div>PICASSO</div>
</div>

这是我之前使用的代码，但现在我想使用不同的 div 而不是数组。

var textarray = [
 "AN APPLE",
 "PARIS",
 "PICASSO"
];

function RndText() {
  var rannum= Math.floor(Math.random()*textarray.length);
  document.getElementById('B').innerHTML=textarray[rannum];
}
onload = function() { RndText(); }
var inter = setInterval(function() { RndText(); }, 1000);

有人可以帮助我吗？
提前致谢！

【问题讨论】：

提供您的 jquery 代码。

标签： javascript jquery html random

【解决方案1】：

您只需要使用Math.random 和setInterval。以下片段：

$(function() {
  var n = 0;
  setInterval(function() {
      n = Math.floor((Math.random() * 3));
      $("#B div").hide();
      $("#B").find('div:eq('+n+')').show();
  },500);
});

#B div:not(:first-child) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  THIS IS
</div>

<div id="B">
  <div>AN APPLE</div>
  <div>PARIS</div>
  <div>PICASSO</div>
</div>

【讨论】：

很好，非常感谢@GuruprasadRao！是否可以关闭淡入淡出？
只需在setInterval中使用show()而不是fadeIn(200)
非常感谢@GuruprasadRao！太棒了！
任何时候..快乐编码..:)
两个小问题！我不想重复这些话。有可能吗？如果我想让这些词在点击时改变怎么办？

【解决方案2】：

您可以将 div 文本放入数组中，并使用 Math.random() 返回随机元素并将其添加到 #A。

$("#B").hide();
var text = $('#A').text();

var words = $("#B div").map(function() {
  return $(this).text()
}).get();

setInterval(function() {
  $('#A').text(text + ' ' + words[Math.floor(Math.random() * words.length)]);
}, 500)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  THIS IS
</div>

<div id="B">
  <div>AN APPLE</div>
  <div>PARIS</div>
  <div>PICASSO</div>
</div>

除了使用数组，您还可以使用 eq() 直接从随机的 #B div 元素中获取文本。

$("#B").hide();
var text = $('#A').text();

setInterval(function() {
  $('#A').text(text + ' ' + $('#B div').eq([Math.floor(Math.random() * $('#B div').length)]).text());
}, 500)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  THIS IS
</div>

<div id="B">
  <div>AN APPLE</div>
  <div>PARIS</div>
  <div>PICASSO</div>
</div>

【讨论】：

感谢您的回答！我不想使用数组，这就是我以前做过的！ @NenadVracar 还有其他建议吗？
我真的不想总是使用纯文本（在某些 div 中我想要链接、图片等），也许隐藏/显示解决方案会更好，你觉得呢？我怎样才能做到这一点@NenadVracar？

【解决方案3】：

试试这个，类似的功能，但使用 eq 和函数作为参数来选择要显示的元素

setInterval(function(){
  $("#B div").hide();
    $("#B div").eq(function() {
    return Math.floor(Math.random() * $("#B div").length);
  }()).show();
}, 500);

【讨论】：

【解决方案4】：

据我了解，您需要此代码

<div id="A"></div>

<script type="text/javascript">
$(document).ready(function() {
  var myArray = ['AN APPLE','PARIS','PICASSO'];
  setInterval(function(){
    var rand = myArray[Math.floor(Math.random() * myArray.length)];
    $('#A').html('THIS IS '+rand);
  },1000);  
});
</script>

【讨论】：

感谢您的回答！我不想使用数组，这就是我之前所做的！ @DevSullo 还有其他建议吗？

【解决方案5】：

这是一种方法。希望这会有所帮助。

<html>
   <head>
    <script type="text/javascript" src="jquery-1.11.3.min.js">    </script>
    <script>
    fruit = new Array("A Pear", "A strawberry", "An orange");
    cities = new Array("London", "New York", "Glasgow");
    artists = new Array("Monet", "Cezanne", "Da Vinci");

    changeValues = function(fruit, cities, artists) {
        var f = Math.floor((Math.random() * fruit.length-1) + 1);
        var c = Math.floor((Math.random() * cities.length-1) + 1);
        var a = Math.floor((Math.random() * artists.length-1) + 1);
        var things = "<div>" + fruit[f] + "</div><div>" + cities[c] + "</div><div>" + artists[a] + "</div>";
        $("#B").html(things);
        setTimeout(changeValues, 2500, fruit, cities, artists);
    }

    $(document).ready(function() {
        setTimeout(changeValues, 2500, fruit, cities, artists);
    });

    </script>

   </head>
   <body>  
      <div id="A">
    THIS IS
      </div>
    <div id="B">
      <div>AN APPLE</div>
      <div>PARIS</div>
      <div>PICASSO</div>
    </div>
      </div>

   </body>
</html>

【讨论】：