0

javascript 文 (または段落) ジェネレーターを作成するにはどうすればよいですか?

ボタンをクリックすると一度に 1 つの見積もりを生成するジェネレーターを作成しました。引用は、2 つのボックス内のテキストエリア内に表示されます。

しかし、私の問題は、一度に 1 つの見積もりしか表示できないことです。たくさんのハーフフレーズを混ぜ合わせて段落を作成できるようにしたい。

(つまり)

|車は青です。| | 車 | 写真 速いです。| |

別の結果は次のようになります。

|車 | 緑の。| | 車 | 写真 速いです。|

  • 「|」の間にあるのは、異なる結果です。

Ps また、すべてを 1 つのテキストエリアに配置し、ボタン クリックで生成したいと考えています。私はいくつかのコーディングを行っています。パラグラフジェネレーターが可能になるように変更したいと思います。

元のコード:

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

2 に答える 2

0

次のような一般的なものを試すことができます。

// 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 ループに置き換えるのは簡単です。

于 2013-10-15T05:22:09.620 に答える
0

このようなものかもしれません

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

アイデアが得られたら、それを変更して、より多くの単語や品詞などを含むあらゆる種類の複雑な文を返すことができます。

于 2013-10-15T05:09:36.893 に答える