如何创建JavaScript句子(或段落）生成器

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

我构建了一个生成器，当您单击按钮时，一次生成一个报价。报价显示在 2 个框内的文本区域中。

但我的问题是它一次只能显示一个报价。我希望能够将一堆半短语混合在一起形成一个段落。

（即）

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

另一个结果是：

|汽车 |是绿色的。|汽车 |速度快。|

• "|"之间有什么s 是不同的结果。

附言我还希望它都在一个文本区域中，并通过咯咯声生成。我完成了一些编码。我想更改它以使段落生成器成为可能。

原始代码 ：

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

爪哇语

 <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();" /> 

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

// 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>');
}