Question

我正在尝试在我的网站上创建一个定义块，它从数组中随机选择一个单词，然后将其与IPA和定义一起显示。

我对JavaScript有基本的了解，但这真的在我之上。

我已经编写了一些非常基本的伪代码来演示我想要做的事情。任何有关如何实际操作的帮助将不胜感激！

JavaScript的：

var Selector = Random(3)
var Definitions = [
    {
        "word":"House",
        "phonetic":"haʊs",
        "definition":"The part of a theatre where the audience is seated, also known as an auditorium."
    },
    {
        "word":"Apron",
        "phonetic":"ˈeɪprən",
        "definition":"In a traditional theatre, the part of the stage which projects in front of the curtain. In many theatres this can be extended, sometimes by building out over the pit."
    }, 
    {
        "word":"Barn Door",
        "phonetic":"bɑːn dɔː",
        "definition":"An arrangement of four metal leaves placed in front of the lenses of fresnel spotlights (qv) to control the shape of the light beam."
    }
 ]

HTML

<div id="word">{Definition.Selector.word}</div>
<div id="phonetic">{Definition.Selector.phonetic}</div>
<div id="definition">{Definition.Selector.definition}</div>

虽然我明白这与可行的代码完全不同，但我希望它能够充分展示我的想法。

长话短说： 选择随机数。从数组中选择项目。使用该数组项中的三个内容填充三个div。

感谢您的时间（并希望得到答案）！

Answer 1

而且，为了做同样的事情，depperm使用纯JavaScript，请参阅此jsFiddle。

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

var definitions = [
    {
        "word":"House",
        "phonetic":"haʊs",
        "definition":"The part of a theatre where the audience is seated, also known as an auditorium."
    },
    {
        "word":"Apron",
        "phonetic":"ˈeɪprən",
        "definition":"In a traditional theatre, the part of the stage which projects in front of the curtain. In many theatres this can be extended, sometimes by building out over the pit."
    }, 
    {
        "word":"Barn Door",
        "phonetic":"bɑːn dɔː",
        "definition":"An arrangement of four metal leaves placed in front of the lenses of fresnel spotlights (qv) to control the shape of the light beam."
    }
 ];

var index = getRandomInt(0, definitions.length);

document.getElementById('word').innerHTML = definitions[index].word;

document.getElementById('phonetic').innerHTML = definitions[index].phonetic;

document.getElementById('definition').innerHTML = definitions[index].definition;

Answer 2

一个可行的解决方案

function getRandomInt(min, max) { 
   return Math.floor(Math.random() * (max - min + 1) + min); 
}  
var Definitions = [
    {
        "word":"House",
        "phonetic":"haʊs",
        "definition":"The part of a theatre where the audience is seated, also known as an auditorium."
    },
    {
        "word":"Apron",
        "phonetic":"ˈeɪprən",
        "definition":"In a traditional theatre, the part of the stage which projects in front of the curtain. In many theatres this can be extended, sometimes by building out over the pit."
    }, 
    {
        "word":"Barn Door",
        "phonetic":"bɑːn dɔː",
        "definition":"An arrangement of four metal leaves placed in front of the lenses of fresnel spotlights (qv) to control the shape of the light beam."
    }
 ];
var rand=getRandomInt(0, Definitions.length);

$('#word').text(Definitions[rand].word);
$('#phonetic').text(Definitions[rand].phonetic);
$('#definition').text(Definitions[rand].definition);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="word"></div>
<div id="phonetic"></div>
<div id="definition"></div>

使用JavaScript填充多个DIV

2 个答案: