java - 集成 js 随机化器，显示可以用 css 设置样式的结果。

Question

过去我只做过前端方面的工作。 HTML/CSS，我正在尝试制作需要一些脚本的东西，但我不确定从哪里开始寻找。

基本上我想做的是以下内容。

我想要 3 个骰子，当页面刷新或点击按钮时，可以随机显示一张脸，面是 1-6，每个骰子有不同的颜色，每个脸和每种颜色都有一组描述链接到。

假设我刷新页面，我希望每个骰子都显示不同的面孔。

然后在每个骰子下面有多个部分，因此:

Red Die 6:(从列表 A 中随机描述，共 6 个)

Green Die 2:(从列表 B 中随机描述，共 6 个)

Black Die 4:(来自列表 C 的随机描述，共 6 个)

能否从经常更改的 XML 文件中提取这些描述？

它们能否显示在自己的可折叠/可展开 DIV 中以便设置文本样式？

我不知道这是否太复杂，超出了我的理解范围。

Answer 1

这应该不是很复杂。这是一个非常基本的 JSFiddle 可以玩:http://jsfiddle.net/gUq7B/

对于 HTML，我们有 3 个段落标记，我们将使用它们来显示骰子。这些可以是 div 或图像或您最终将在您的网站上使用的任何其他内容。

<p id="dice1"></p>
<p id="dice2"></p>
<p id="dice3"></p>

接下来我们要使用 Javascript 声明我们的随机变量(为简单起见，我有 3 个单独的变量，但在生产中您可能想要创建一个函数来生成随机数):

var dice1rand = Math.floor((Math.random()*6)+1);
var dice2rand = Math.floor((Math.random()*6)+1);
var dice3rand = Math.floor((Math.random()*6)+1);

然后我们可以设置段落显示值:

document.getElementById("dice1").innerHTML = dice1rand;
document.getElementById("dice2").innerHTML = dice2rand;
document.getElementById("dice3").innerHTML = dice3rand;

最后我们可以添加一些逻辑规则来设置段落元素的 CSS。下面是使用 JQuery 设置背景颜色的示例:

if (dice1rand === 1) $("#dice1").addClass("red");
if (dice2rand === 2) $("#dice2").addClass("green");

一旦你开始工作，你就可以用一个函数来切换 CSS 逻辑，以从你的 XML 文件中获取数据。