サイコロ２

CSSで角丸サイコロを作る

プログラム: (→大)

DOM親要素に「<table id="dice">
<tr><td id="eye0"></td><td id="eye1"></td><td id="eye2"></td></tr>
<tr><td id="eye3"></td><td id="eye4"></td><td id="eye5"></td></tr>
<tr><td id="eye6"></td><td id="eye7"></td><td id="eye8"></td></tr>
</table>」をHTML設定。

目＝13。
「#dice」に{
　"border-collapse":"separate",//隣接するセルのボーダーを重ねない
　"border-spacing":"2px",//セルのボーダーの間隔
　"ボーダー":"solid 3px {黒色}",
　"余白":"{目/2}px",
　"border-radius":"{目/2}px"//角丸
}をDOMスタイル一括設定。

９回
　「#eye{回数-1}」に{
　　"幅":"{目}px","高さ":"{目}px",
　　"line-height":"{目}px",//行高さ
　　"ボーダー":"なし",
　　"余白":"0px",
　　"背景色":白色,
　　"border-radius":"{目/2}px"//角丸
　}をDOMスタイル一括設定。
ここまで。

C=0
0.1秒タイマー開始した時には(T)
　((６の乱数)+1)のサイコロ表示。
　C=C+1。
　もし、C=8ならば、Tのタイマー停止。
ここまで。

目位置＝[[4],[0,8],[0,4,8],[0,2,6,8],[0,2,4,6,8],[0,2,3,5,6,8]]
●（数の）サイコロ表示
　９回
　　「#eye{回数-1}」の「背景色」に白色をDOMスタイル設定。
　ここまで。
　もし、数が１ならば、目色は赤色。
　違えば、目色は黒色。
　(数)回
　　「#eye{目位置[数-1][回数-1]}」の「背景色」に目色をDOMスタイル設定。
　ここまで。
ここまで。

雪乃☆雫作
利用バージョン: 3.1.19
投稿日時: 2020/12/07 09:26 (編集: 2021/11/12 14:14)
ライセンス: 未指定 (未指定/貯蔵庫のみ)
タイプ: wnako

⭐⭐⭐⭐⭐ ログインして★を付けよう！

サイコロ２

サイコロ２

作品公開情報