dice

jackliver

2010-09-03 17:30:02

License: MIT License

Fork: 0

Fav: 0

View: 233

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 16 lines
HTML 49 lines
CSS 145 lines

dice

dice

body { background-color: #DDDDDD; font: 30px sans-serif; }

.dice > LI {
  display:inline-block;
  margin:0px 0px 0px 0px;
}

.d1, .d2, .d3, .d4, .d5, .d6 {
  width: 48px;
  height: 48px;
  margin: 10px;
  position: absolute;
  top:50px;

background:-webkit-gradient(linear,left top,center bottom,from(#fff),color-stop(.5,#fff),color-stop(.5,#fcfcfc),to(#ccc));
  background:-moz-linear-gradient(-72deg,#fff,#fff 50%,#fcfcfc 50%,#ccc);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -webkit-box-shadow:0 0 4px #000;
  -moz-box-shadow:0 0 4px #000;
  text-align:center;
}

.dice > LI:nth-child(1){
  left : 10px;
}

.dice > LI:nth-child(2) {
  left : 70px;
}

.dice > LI:nth-child(3) {
  left : 130px;
}

.dice > LI:nth-child(4) {
  left : 190px;
}

.dice > LI:nth-child(5) {
  left : 250px;
}

.dice > LI > SPAN{
  font-size: 10px;
  position: absolute;
}

.d1{
  color: red;
}

.d1 > SPAN:nth-child(1),
.d1 > SPAN:nth-child(2),
.d1 > SPAN:nth-child(3),
.d1 > SPAN:nth-child(4),
.d1 > SPAN:nth-child(5),
.d1 > SPAN:nth-child(6),
.d3 > SPAN:nth-child(3),
.d3 > SPAN:nth-child(4),
.d5 > SPAN:nth-child(5),
.d5 > SPAN:nth-child(6) {
  top : 38%;
  left : 42%;
}

.d2 > SPAN:nth-child(1),
.d2 > SPAN:nth-child(2),
.d2 > SPAN:nth-child(3) {
  top : 25%;
  left : 25%;
}

.d2 > SPAN:nth-child(4),
.d2 > SPAN:nth-child(5),
.d2 > SPAN:nth-child(6){
  bottom : 22%;
  right : 22%;
}

.d3 > SPAN:nth-child(1),
.d3 > SPAN:nth-child(2),
.d4 > SPAN:nth-child(1),
.d5 > SPAN:nth-child(1){
  top : 18%;
  left : 22%;
}

.d3 > SPAN:nth-child(5),
.d3 > SPAN:nth-child(6),
.d4 > SPAN:nth-child(4),
.d4 > SPAN:nth-child(5),
.d4 > SPAN:nth-child(6),
.d5 > SPAN:nth-child(4){
  bottom : 18%;
  right : 18%;
}

.d4 > SPAN:nth-child(2),
.d5 > SPAN:nth-child(2){
  top : 18%;
  right : 18%
}

.d4 > SPAN:nth-child(3),
.d5 > SPAN:nth-child(3){
  bottom : 18%;
  left : 22%;
}

.d6 > SPAN:nth-child(1){
  top : 14%;
  left : 22%;
}

.d6 > SPAN:nth-child(2){
  top : 14%;
  right : 20%;
}

.d6 > SPAN:nth-child(3){
  top : 38%;
  left :22%;
}

.d6 > SPAN:nth-child(4){
  top : 38%;
  right : 20%;
}

.d6 > SPAN:nth-child(5){
  bottom : 14%;
  left : 22%;
}

.d6 > SPAN:nth-child(6){
  bottom : 14%;
  right : 20%;
}

#dice_field {
  background-color: #5696a6;
  padding : 5px;
}

//document.write('Hello, Worldd!'); function roll(dice){ 　r=Math.random()*6; //乱数表で０～５.９９９９を発生させる　rr=Math.floor(r)+1;　　 //切り捨てて０～５の整数にし＋１する dice.className = 'd' + rr; } function rollAll(){ roll(document.getElementById('dice1')); roll(document.getElementById('dice2')); roll(document.getElementById('dice3')); roll(document.getElementById('dice4')); roll(document.getElementById('dice5')); } <div id='dice_field'> <ul class='dice'> <li id='dice1' class='d1'> ● ● ● ● ● ● </li> <li id='dice2' class='d1'> ● ● ● ● ● ● </li> <li id='dice3' class='d1'> ● ● ● ● ● ● </li> <li id='dice4' class='d1'> ● ● ● ● ● ● </li> <li id='dice5' class='d1'> ● ● ● ● ● ● </li> </ul> <input type='button' name='test' value='振る' onclick='rollAll();'> </div> body { background-color: #DDDDDD; font: 30px sans-serif; } .dice > LI { display:inline-block; margin:0px 0px 0px 0px; } .d1, .d2, .d3, .d4, .d5, .d6 { width: 48px; height: 48px; margin: 10px; position: absolute; top:50px; background:-webkit-gradient(linear,left top,center bottom,from(#fff),color-stop(.5,#fff),color-stop(.5,#fcfcfc),to(#ccc)); background:-moz-linear-gradient(-72deg,#fff,#fff 50%,#fcfcfc 50%,#ccc); -webkit-border-radius:10px; -moz-border-radius:10px; -webkit-box-shadow:0 0 4px #000; -moz-box-shadow:0 0 4px #000; text-align:center; } .dice > LI:nth-child(1){ left : 10px; } .dice > LI:nth-child(2) { left : 70px; } .dice > LI:nth-child(3) { left : 130px; } .dice > LI:nth-child(4) { left : 190px; } .dice > LI:nth-child(5) { left : 250px; } .dice > LI > SPAN{ font-size: 10px; position: absolute; } .d1{ color: red; } .d1 > SPAN:nth-child(1), .d1 > SPAN:nth-child(2), .d1 > SPAN:nth-child(3), .d1 > SPAN:nth-child(4), .d1 > SPAN:nth-child(5), .d1 > SPAN:nth-child(6), .d3 > SPAN:nth-child(3), .d3 > SPAN:nth-child(4), .d5 > SPAN:nth-child(5), .d5 > SPAN:nth-child(6) { top : 38%; left : 42%; } .d2 > SPAN:nth-child(1), .d2 > SPAN:nth-child(2), .d2 > SPAN:nth-child(3) { top : 25%; left : 25%; } .d2 > SPAN:nth-child(4), .d2 > SPAN:nth-child(5), .d2 > SPAN:nth-child(6){ bottom : 22%; right : 22%; } .d3 > SPAN:nth-child(1), .d3 > SPAN:nth-child(2), .d4 > SPAN:nth-child(1), .d5 > SPAN:nth-child(1){ top : 18%; left : 22%; } .d3 > SPAN:nth-child(5), .d3 > SPAN:nth-child(6), .d4 > SPAN:nth-child(4), .d4 > SPAN:nth-child(5), .d4 > SPAN:nth-child(6), .d5 > SPAN:nth-child(4){ bottom : 18%; right : 18%; } .d4 > SPAN:nth-child(2), .d5 > SPAN:nth-child(2){ top : 18%; right : 18% } .d4 > SPAN:nth-child(3), .d5 > SPAN:nth-child(3){ bottom : 18%; left : 22%; } .d6 > SPAN:nth-child(1){ top : 14%; left : 22%; } .d6 > SPAN:nth-child(2){ top : 14%; right : 20%; } .d6 > SPAN:nth-child(3){ top : 38%; left :22%; } .d6 > SPAN:nth-child(4){ top : 38%; right : 20%; } .d6 > SPAN:nth-child(5){ bottom : 14%; left : 22%; } .d6 > SPAN:nth-child(6){ bottom : 14%; right : 20%; } #dice_field { background-color: #5696a6; padding : 5px; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/urzi/js?view=design"></script><a href="http://jsdo.it/jackliver/urzi" title="dice">dice - jsdo.it - share JavaScript, HTML5 and CSS</a>
zip

dice

tags

Tweet

twitter