Как создать генератор javascript предложения (или абзаца)?

Question

Как создать генератор javascript (или абзаца)?

Я построил генератор, который генерирует одну цитату в то время, когда вы нажимаете кнопку. Цитата отображается внутри текстового поля внутри двух ящиков.

Но моя проблема в том, что она может показывать только одну цитату за раз. Я хочу быть в состоянии смешать кучу половин фраз вместе, чтобы сделать абзац.

(то есть.) | Автомобиль | синий. | Автомобиль | быстро. |

и другой результат был бы:

| Автомобиль | зеленый. | Автомобиль | быстро. |

• То, что находится между «|» s, - разные результаты.

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

Обратите внимание: forEach требует поддержки ES5. Тривиально заменить на цикл for, если это необходимо.