Question

Javascript noob here .... 我正在尝试建立一个网站，帮助我的孩子从一个选定的组中读取预定义的句子，然后当点击一个按钮时，它将显示其中一个句子。阵列是最好的选择吗？

例如，我有这个数组（下面），点击一个按钮，我希望这些句子中的一个出现在页面上。

<script type="text/javascript">
Sentence = new Array()
Sentence[0]='Can we go to the park.';
Sentence[1]='Where is the orange cat? Said the big black dog.';
Sentence[2]='We can make the bird fly away if we jump on something.'
Sentence[3]='We can go down to the store with the dog. It is not too far away.'
Sentence[4]='My big yellow cat ate the little black bird.'
Sentence[5]='I like to read my book at school.'
Sentence[6]='We are going to swim at the park.'
</script>

同样，这是一个最好的数组，我怎么能得到句子显示？理想情况下，我希望按钮随机选择其中一个句子，但现在只显示其中一个句子会有所帮助。

Answer 1

数组可以用于此目的：

您可以使用此代码随机显示指定div中的句子：

var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$('#divid').text(rand); 

//If you don't fancy jQuery then do this instead
document.getElementById('divid').innerHTML = rand;

<强> Working DEMO

Answer 2

使用数组很简单。这是一个这样做并检索随机句子的例子：

 var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
],

//the number of sentences in the array
maxSentences = sentences.length;

//get and return a random sentences from array
function getRandomSentence() {
    //calculate a random index
    var index = Math.floor(Math.random() * (maxSentences - 1));
    //return the random sentence
    return sentences[index];
}

要在div中显示随机句子，您可以使用如下函数:(请注意，此示例使用jQuery来简化，并提供跨浏览器使用）：

//show a random sentences in a DOM selector
function showRandomSentence(selector){
    var randomSentence = getRandomSentence();  
    $(selector).html(randomSentence);
}

要查看上述工作示例，请访问this jsFiddle

Answer 3

阵列对我来说似乎是一个不错的选择。您也可以这样定义：

var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
];

Answer 4

这是一个实时example。希望你使用jquery。这让事情变得简单。

主要部分就是这个，它从数组中选择随机句子。

 var randomIndex = Math.floor((Math.random()*Sentence.length)); //random number from [0,Sentence.length)
$("#sentence-div").text( Sentence[randomIndex] );

Answer 5

就我个人而言，我认为你应该花一些时间来实施JSON。

虽然它本质上会最终成为一个数组... JSON可能更灵活，您可以根据需要嵌入有关该问题的更多信息。

我怀疑随着时间的推移你的要求会变得更加复杂，解析一些JSON的额外时间是相当微不足道的。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Simple use of JSON</title>
<script type="text/javascript">
    //ultimately this will be in a file that you will access so you don't have to update code when the list changes.
    var sentence_json = '{ "sentences" : [{ "sentence" : "Can we go to the park.", "difficulty" : "1" },' + 
    '{ "sentence" : "Where is the orange cat? Said the big black dog.", "difficulty" : "2" },' + 
    '{ "sentence" : "We can make the bird fly away if we jump on something.", "difficulty" : "3" },' + 
    '{ "sentence" : "We can go down to the store with the dog. It is not too far away.", "difficulty" : "3" },' + 
    '{ "sentence" : "My big yellow cat ate the little black bird.", "difficulty" : "2" },' + 
    '{ "sentence" : "I like to read my book at school.", "difficulty" : "1" },' + 
    '{ "sentence" : "We are going to swim at the park.", "difficulty" : "1" }]}';

    //this should go through a parser... but for simplest example:
    var sentence_obj = eval ("(" + sentence_json + ")");
</script>
</head>
<body>
<p>
    Sentence: <span id="sentence"></span><br>
    Difficulty: <span id="difficulty"></span><br>
</p>
<script type="text/javascript">
    //here's where you use an iterator, but static for the example.
    document.getElementById("sentence").innerHTML=sentence_obj.sentences[1].sentence 
    document.getElementById("difficulty").innerHTML=sentence_obj.sentences[1].difficulty
</script>       
</body>
</html>

简单地解决这个问题是“最好的”，这是一种相对的。 HERE是一个工作示例，我添加了一个按钮“和东西”。

随机数组句子？

5 个答案: