2

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>

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

4

5 回答 5

3

Array 可以用于此目的：

您可以使用此代码在指定的 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;

工作演示

于 2012-12-07T16:57:20.623 回答
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.'
],

//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];
}

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

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

要查看上述工作示例，请访问此 jsFiddle ​</p>

于 2012-12-07T17:32:23.980 回答
1

数组对我来说似乎是一个不错的选择。你也可以这样定义：

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.'
];
于 2012-12-07T16:54:52.963 回答
1

这是一个活生生的例子。希望您使用的是 jquery。它使事情变得容易。

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

 var randomIndex = Math.floor((Math.random()*Sentence.length)); //random number from [0,Sentence.length)
$("#sentence-div").text( Sentence[randomIndex] );
于 2012-12-07T17:01:44.497 回答
0

就我个人而言，我认为您应该花一些时间来锻造一些实现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>

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

于 2012-12-07T17:05:39.330 回答