如何在网页中单击按钮时从列表中显示随机短语？ [英] How do I display a random phrase from a list when a button is clicked in a web page?

问题描述

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

我想要做的就是像这样设置它：

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

我还是新手工编码的东西 - 我有一本关于HTML / CSS的书，还有一本关于PHP的书，它仍然是未读的，所以我可能需要一步一步的过程。 （我有一个主机和一切，所以这已经照顾。）提前致谢！

它没有页面加载（即紧接在按钮点击之后），您必须在Javascript中执行它（在这里工作jsfiddle示例）

 < a id =myButtonhref =＃> 
点击此处获取随机内容
< / a> 
 
< div id =myRandomDiv> 
< / div> 
 
< script type =text / javascriptcharset =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'，
）; 
 
？> 
 
 
 
 
 <！ - 您的页面的剩余空间 - > 
 
<？php 
 
 echo $ randomThings [mt_rand（0，count（$ randomThings）-1）]; 
 
？> 
 
 <！ -   - 其他东西 - > 
  

首先，我们创建一个随机事物数组（'list'）并将其存储在变量 $ randomThings 。

数组中的元素可以使用 $ variableName [$ index] - 在这种情况下，指数只会是0,1,2,3,4,5,6。

单线程（以'echo'开始）的作品是 mt_rand 将返回一个介于0和6之间的随机数，所以它会从$ randomThings数组。 echo 然后将它吐到页面中。

I am creating a web page where someone can visit it. They type a question in a field and click a button, and a response is passed back to them. (Kind of like a magic 8 ball).

What I'm trying to do is set it up something like this:

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

I'm still new to hand-coding things - I have a book on HTML/CSS and one on PHP, which lay still unread, so I'll probably need a step-by-step process. (I have a host and everything, so that's already taken care of.) Thanks in advance!

解决方案

To do it without a page load (i.e. immediately after the button click), you'll have to do it in 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>    

---

To do this instead in PHP (which will require a new page load), you could do this:

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

First, we create an array ('list') of random things and store it in the variable $randomThings.

Elements in an array can be accessed using $variableName[$index] -- in this case, the indices will simply be 0,1,2,3,4,5,6.

The reason this one-liner (beginning with 'echo') works is, mt_rand is going to return a random number between 0 and 6, so it'll grab a random element from the $randomThings array. echo will then spit it to the page.

这篇关于如何在网页中单击按钮时从列表中显示随机短语？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！