0

私は過去に主にフロントエンドのことしかやったことがありません。HTML/CSS とスクリプト作成が必要なものを作成しようとしていますが、どこから始めればよいかわかりません。

基本的に私がやろうとしていることは次のとおりです。

ページが更新されたとき、またはボタンが押されたときに面をランダムに表示できる 3 つのサイコロが必要です。面は 1 ～ 6 です。各サイコロには異なる色があり、各面と各色にはリンクされている一連の説明があります。 .

たとえば、ページを更新すると、それぞれのサイコロに異なる顔を表示させたいとします。

その下には、各ダイの複数のセクションがあります。

赤のダイス 6: (リストA/6からのランダムな説明)

緑のダイス 2: (リスト B の 6 つの説明からランダムに選択)

Black Die 4: (リストC/6からのランダムな説明)

これらの記述は、頻繁に変更される XML ファイルから取得できますか?

テキストのスタイルを設定するために、独自の折りたたみ可能/展開可能な DIV 内に表示できますか?

これが複雑すぎて頭がいっぱいになるかどうかはわかりません。

4

1 に答える 1

0

これはそれほど複雑ではありません。ここで遊ぶための本当に基本的な 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");

これが機能するようになったら、XML ファイルからデータを取得する関数を使用して CSS ロジックを切り替えることができます。

于 2013-06-26T20:59:47.473 に答える