如何創建JavaScript句子（或段落）生成器？

Question

如何構建JavaScript句子（或段落）生成器？

我已經構建了一個生成器，可以在單擊按鈕時一次生成一個報價。報價顯示在2個框內的textarea內。

但我的問題是，它一次只能顯示一個報價。 我希望能夠混合一堆半個短語在一起做出一個段落。

（ie。）

|汽車|是藍色的。 |汽車|速度很快。 |

另一個結果是：

|汽車|是綠色的。 |汽車|很快。|

• 「|」之間的內容是不同的結果。

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

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

一旦你的想法，你可以修改返回包含更多的單詞，詞性等複雜sentances的所有方式

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

請注意，for each需要ES5支持。如果需要，用一個for循環代替。