Question

我正在设计一个网站，试图让它随机显示一些列表中的3个语句。我设法搜索并找到以下代码，但它一次只显示一个东西，我怎么能修改它来显示列表中的3个不同的项目（在单独的行上）？

<html>
<head>
<title>whynot?</title>
<script type="text/javascript">
var textarray = [
 "why not play some fifa?",
 "why not open a beer?",
 "why not call a relative?",
 "why not challenge someone to a duel?"
];

function RndText() {
  var rannum= Math.floor(Math.random()*textarray.length);
  document.getElementById('ShowText').innerHTML=textarray[rannum];
}

onload = function() { RndText(); }

</script>
</body>
    <body bgcolor="#FFFF00">
        <h1 style="text-align: center;">
            &nbsp;</h1>
        <h1 style="text-align: center;">
        &nbsp;</h1>
    <h1 style="text-align: center;">
        <span style="color:#000000;"><span style="font-family: 'lucida sans unicode', 'lucida grande', sans-serif;"><span style="font-size: 36px;"><span style="line-height: 16px;"><span style="background-color:#ffff00;">
<div id="ShowText"></div></span></span></span></span></span></h1>
</body>
</html>

Answer 1

尝试this，这将为您提供distinct中的三个array语句。

function RndText() 
{
  var x=[];
  while(x.length !== 3)
  {
  var rannum= Math.floor(Math.random()*textarray.length);

   if(x.indexOf(rannum) === -1)
    {
  x.push(rannum);
  document.getElementById('ShowText').innerHTML += textarray[rannum] + "<br> <br> <br>";

    }

   }
}

更新：New Link

Answer 2

只需执行RndText（）;功能3次：

onload = function() { RndText();RndText();RndText(); }

和

function RndText() {
  var rannum= Math.floor(Math.random()*textarray.length);
var item=document.getElementById('ShowText');
  item.innerHTML=item.innerHTML+textarray[rannum];
}

Answer 3

function RndText() {
    for(var i = 0; i <= 3; i++){
        var rannum= Math.floor(Math.random()*textarray.length);
        document.getElementById('ShowText').innerHTML += textarray[rannum];
   }
}

您需要+= innerHTML才能显示3个不同的内容。

Answer 4

这扩展了Rajaprabhu的上述答案，并将这些陈述添加到三个不同的跨度中。

查看小提琴http://jsfiddle.net/talymo/7VNFM/

var textarray = [
    "why not play some fifa?",
    "why not open a beer?",
    "why not call a relative?",
    "why not challenge someone to a duel?"];


function RndText() {
    var x = [];
    var html = '';   
    while (x.length !== 3) {
        var rannum = Math.floor(Math.random() * textarray.length);
        if (x.indexOf(rannum) === -1) {
            console.log(x.length);
            x.push(rannum);
            $('#Phrase'+ x.length).html(textarray[rannum]);
        }
    }

}

显示3个随机选择的陈述

4 个答案: