单击网页中的按钮时，如何显示列表中的随机短语？答案

【问题标题】：How do I display a random phrase from a list when a button is clicked in a web page?单击网页中的按钮时，如何显示列表中的随机短语？
【发布时间】：2011-06-11 11:34:14
【问题描述】：

我正在创建一个可供某人访问的网页。他们在字段中输入问题并单击按钮，然后将响应传回给他们。（有点像魔术 8 球）。

我想做的是这样设置：

http://img585.imageshack.us/img585/997/layoutoi.png

我对手工编码还是新手——我有一本关于 HTML/CSS 的书和一本关于 PHP 的书，这本书还没有读过，所以我可能需要一个循序渐进的过程。（我有一个主机和一切，所以已经处理好了。）提前谢谢！

【问题讨论】：

标签： php javascript html random generator

【解决方案1】：

要在不加载页面的情况下执行此操作（即在单击按钮后立即执行），您必须使用 Javascript (working jsfiddle example here) 执行此操作

<a id="myButton" href="#">
    click here to get random stuff
</a>

<div id="myRandomDiv">
</div>

<script type="text/javascript" charset="utf-8">
    var randomStrings = [
        "hello 1",
        "hello 2",
        "hello 3", 
        "hello 4",
        "hello 5",
    ];



    var randomDiv = document.getElementById("myRandomDiv");

    document.getElementById("myButton").addEventListener("click", function() {
          randomIndex = Math.ceil((Math.random()*randomStrings.length-1));
          newText = randomStrings[randomIndex];
          randomDiv.innerHTML = newText;
    });
</script>

要在 PHP 中执行此操作（这将需要加载新页面），您可以这样做：

<?php


$randomThings = array(
    'random thing 1',    
    'random thing 2',    
    'random thing 3',    
    'random thing 4',    
    'random thing 5',    
    'random thing 6',    
    'random thing 7 ',    
);

?>




<!-- REST OF YOUR PAGE -->

<?php

echo $randomThings[mt_rand(0,count($randomThings)-1)];

?>

<!-- OTHER STUFF -->

首先，我们创建一个随机事物的数组（“列表”）并将其存储在变量$randomThings中。

可以使用$variableName[$index] 访问数组中的元素——在这种情况下，索引将只是 0,1,2,3,4,5,6。

这个单行（以'echo'开头）起作用的原因是，mt_rand 将返回一个介于 0 和 6 之间的随机数，因此它将从 $randomThings 数组中获取一个随机元素。 echo 然后会将其吐到页面上。

【讨论】：

应该是count($randomThings) - 1，因为mt_rand() 包含在内。
感谢你们所有人（和女孩！）的回答。我有两个快速的问题 - 有时，当我单击“myButton”时，我会得到“未定义”。有没有办法解决这个问题，还是有时会发生？此外，所有这些代码会进入一页还是分成多页？例如，在 Dreamweaver 中，在包含站点内容的页面上，我是发布 HTML 和 Javascript，还是只发布 HTML 并为 Javascript 本身创建一个单独的文件？抱歉，就像我之前说的，对整个手工编码场景是新手。 :D
抱歉这个错误，BigCaseyDog。这发生在 JS Fiddle 上，因为我在实验时链接了一个过时的版本。我现在已经修好了:)
你可以把这一切都放在一个 HTML 页面上，就像我在这里所做的那样，通过在 script 标签中包围 javascript，或者你可以在 JS 文件中使用 javascript：hypergurl.com/jsfiles.html
哦，好的，谢谢你的链接 - 这解释了一切。非常感谢你们所有人的一切 - 它就像一个魅力！如果我有任何问题，我会再次发布！

【解决方案2】：

Dorkitude 的回答是一个很好的例子，但作为一个额外的建议，我想指出，在脚本中硬编码数据通常被认为是不好的做法（即 $value = 'someValue'），除非绝对有没有其他办法。相反，您将使用某种数据源来代替您的响应（纯文本文件、数据库、Web 服务等）。

例如，假设您已将列表存储在名为“randomThings.txt”的纯文本文件中，并将每个响应放在单独的行中。然后你可以像这样调整 Dorkitude 的代码：

<?php
    // Flags set here to ensure integrity
    $randomThings = file('responses.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
?>

<!-- REST OF YOUR PAGE -->

<?php

    echo $randomThings[mt_rand(0,count($randomThings)-1)];

?>
<!-- OTHER STUFF -->

【讨论】：

谢谢，我想知道这一点，我唯一坚持的是从多个文件中创建数组的语法。我试过使用 $array4 = $array1 + $array2 + $array3; $sentence = $array4[mt_rand(0, count($array4) - 1)];返回$句子；但它只输出第一个数组。

【解决方案3】：

我知道您标记了问题 PHP，但您可能想考虑使用 javascript。优点是您不需要重新加载页面 - 对于这么简单的事情，使用 php 并没有任何优势。

javascript 解决方案如下所示：

<html>
  <head>
    <script type='text/javascript'>
      var answerArray = new Array("yes", "no", "maybe");

      function getAnswer() {
        document.getElementById('answerDiv').innerHTML = 
          answerArray[Math.floor(Math.random() * answerArray.length)];
      }
    </script>
  </head>
  <body>
    <input id='questionField' type='text' /><br/>
    <input type='submit' value='Ask Me!' onclick='getAnswer()' />
    <div id='answerDiv'></div>
  </body>
</html>

【讨论】：