dice jackliver Follow 2010-09-03 17:30:02 License: MIT License Fork0 Fav0 View233 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 16 lines HTML 49 lines CSS 145 lines dice //document.write('<p>Hello, Worldd!</p>'); function roll(dice){ r=Math.random()*6; //乱数表で0~5.9999を発生させる rr=Math.floor(r)+1; //切り捨てて0~5の整数にし+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'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice2' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice3' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice4' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice5' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> </ul> <br><br> <input type='button' name='test' value='振る' onclick='rollAll();'> </div> 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('<p>Hello, Worldd!</p>'); function roll(dice){ r=Math.random()*6; //乱数表で0~5.9999を発生させる rr=Math.floor(r)+1; //切り捨てて0~5の整数にし+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'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice2' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice3' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice4' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice5' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> </ul> <br><br> <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; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/urzi/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/jackliver/urzi" title="dice">dice - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter