Question

如何构建javascript语句（或段落）生成器？

我已经构建了一个生成器，当您单击按钮时，它会一次生成一个引号。报价显示在2个方框内的textarea内。

但我的问题是它一次只能显示一个引用。我希望能够将一堆半短语混合在一起制作一个段落。

（即。）

|汽车|是蓝色的。 |汽车|很快|

，另一个结果是：

|汽车|是绿色的。 |汽车|很快。|

“|”之间的内容是不同的结果。

P.S。我也希望这一切都在一个textarea中，并通过点击点击生成。我做了一些编码。我想改变它以使段落生成器成为可能。

原始代码：

CSS

<style>
div#box{
height : 330px;
width : 450px;
background-color : teal;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
margin : 0px auto;}

 div#box2{
 height : 300px;
 width : 430px;
 background-color : brown;
 border : 1px solid black;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-left-radius : 10px;
 border-bottom-right-radius: 10px;
 margin : 0px auto;
 margin-top: 15px;} 

div#boxTitle{
height : 60px;
width : 390px;
background-color : olive;
color : teal;
font-family : times new roman;
font-size : 15pt;
letter-spacing : 1px;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
text-decoration : bold;
text-transform : uppercase;
text-align : center;
margin : 0px auto;
margin-top : 13px;}


textarea{
height : 200px;
width : 390px;
background-color : olive;
color : black;
font-family : arial new, cursive, serif;
font-size : 11pt;
letter-spacing : 3px;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
text-decoration : italic;
text-align : center;
margin-left : 5%;
margin-right : 5%;
margin-top : 20px;} 

.button{
height : 40px;
width : 175px;
background-color : teal;
color : #bbb;
font-family : arial new;
font-size : 12pt;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius:     10px;
text-decoration : bold;
text-align : center;
margin-left: 50%;}
</style>

的Javascript

 <script type="text/javascript"> 
 var Quotes = new Array(); 

 Quotes[0]="your first quote.";
 Quotes[1]="your second quote. "; 
 Quotes[2]="your third quote.  "; 


function getQuote(){ var seed      = Math.floor(Math.random() * 
Quotes.length); return     Quotes[seed]; } 

 </script>

HTML

  <div id="box">
 <div id="box2">
 <div      id="boxTitle"><br>generator      title</div>
 <textarea id="quoteBody"></textarea>
 </div></div>

  <br><br>
  <input type="button"    class="button" value="Get a   new quote"    onclick="document.   getElementById('quoteBody').  innerHTML = getQuote();" />

Answer 1

这样的事可能

<script type="text/javascript"> 
 var nouns = ["car","horse","apple","person","chimp"];
 var adjectives = ["red","fast","lonely","hungry","insane"];

function getQuote(){ 
var randomNounIndex      = Math.floor(Math.random() * nouns.length);
var randomAdjectiveIndex = Math.floor(Math.random() * adjectives.length);
var retVal="The "+nouns[randomNounIndex]+" is "+adjectives[randomAdjectiveIndex]+".";
return retVal;
} 
</script>

一旦你明白了，你可以修改它以返回包含更多单词，词性等的所有复杂的发送方式。

Answer 2

你可以尝试一些通用的东西：

// Return a random element of an array
function getRandomElement(arr) {
  return arr[Math.random() * arr.length | 0];
}

// Return a string of elements chosen randomly from a sequence of arrays
function genPhrase() {
  var phrases = [
     ['Huge','Extraordinary','Average','Amazing'],
     ['Intelligence','Ignorance','Mediocraty','Courage', 'Cowardice']
  ];
  var phrase = [];
  phrases.forEach(function(a) {phrase.push(getRandomElement(a));});
  return phrase.join(' ');
}

// Just for play..   
for (var i=5; i; i--) {
  document.write(genPhrase() + '<br>');
}

请注意， forEach 需要ES5支持。如果需要，可以用for循环替换。

如何创建一个javascript语句（或段落）生成器？

2 个答案: