Witam, chce napisac strone losujaca lotto i wiem jak zrobic randomowe przemieszczanie sie div'a po oknie przegladarki, ale nie wiem jak zastosowac to do 49 div'ow zeby kazdy szedl w inna strone strona w linku i wklejam tez kod
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"/> <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700&subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Bungee+Inline&subset=latin-ext" rel="stylesheet"> <title>LOTTO - Witryny</title> </head> <body onload="siteStyle();"> <div class="lotto" id="lotto"> <div class="lottoResult" id="lottoResult"> </div> <div class="lottoContainer" id="lottoContainer"> </div> </div> <div class="container" id="container"> <div class="header"> < LOTTO > </div> <div class="menu" id="menu"> <ul> <li><button class="button">LOTTO</button></li> <li><button class="button">ABSOLUTE</button></li> </ul> </div> <div class="content" id="content"> <ul> <li><button class="button" onclick="showScript">SCRIPT</button></li> <li><button class="button" onclick="lotto();">PLAY</button></li> <li><button class="button" onclick="showScript">RELOAD</button></li> </ul> <textarea class="scriptBox" readonly> </textarea> </div> <div class="footer"> LOTTO | LAST MODIFIED: <script>document.write(document.lastModified); </script> </div> </div> <script src="jquery.js"></script> <script src="script.js"></script> </body> </html>
html, body{ margin: 0; padding: 0; font-family: 'Amatic SC', cursive; /* font-family: 'Bungee Inline', cursive; */ text-align:center; } li, ul{ list-style:none; padding:none; margin:none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0; } a{ color:inherit; text-decoration:inherit; } .button{ height:38px; line-height:40px; font-size:30px; border:none; outline:none; background:#751313; color:#fff; font-family: 'Amatic SC', cursive; transition:all ease 600ms; margin:1px 0px 1px 0px; } .button:hover{ box-shadow:inset 0 0 15px 1px rgba(0,0,0,0.5); cursor:pointer; color:#751313; background:#fff; } .container{ width:800px; margin: 20px auto 0 auto; box-shadow: 0 0 25px 1px rgba(0,0,0,0.5); } .header{ width:100%; height:100px; line-height:100px; color:#751313; font-size:75px; } .menu{ width:200px; height:100%; float:left; } .menu .button{ width:200px; } .content{ width:600px; box-sizing:border-box; float:left; padding: 0 5px 0 5px; } .content > ul > li{ float:left; margin:0 1px 0 1px; } .scriptBox{ width:calc(100% - 2px); height:400px; border:none; padding:0; box-shadow:inset 0 0 15px 1px rgba(0,0,0,0.5); margin-top:5px; resize: none; outline: 1px solid #751313; } .footer{ color:#751313; clear:both; width:100%; height:40px; line-height:40px; font-size:25px; font-weight:700; } /* LOTTO ELEMENTS */ .lotto{ width:100%; height:100%; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,1); display:none; } .lottoResult{ width:100%; height:100px; background:#fff; box-shadow:inset 0 0 40px 2px rgba(0,0,0,0.7); display:none; } .lottoContainer{ width:100%; height:100%; display:none; } .lottoBall{ width:60px; height:60px; line-height:60px; border-radius:50%; box-shadow:inset 0 0 20px 1px rgba(0,0,0,0.5); background:#d1bf3c; font-size:30px; font-weight:700; display:inline-block; margin: 1px; }
var container = document.getElementById("container"); var menu = document.getElementById("menu"); var content = document.getElementById("content"); function siteStyle(){ container.style.height = window.innerHeight - 40 + "px"; menu.style.height = window.innerHeight - 180 + "px"; content.style.height = window.innerHeight - 180 + "px"; setTimeout("siteStyle()",50); } function lotto(){ var numTable = []; var resultTable = []; var numCount = 49; var lotto = document.getElementById("lotto"); var lottoContainer = document.getElementById("lottoContainer"); $("#lotto").slideDown(1500); $("#lottoResult").delay(1500).slideDown(1000); $("#lottoContainer").delay(2500).fadeIn(1000); for(i=1; i<=numCount; i++){ var a = i; numTable.push(i); var element = document.createElement("div"); element.id = "lottoBall" + i; element.className = "lottoBall"; lottoContainer.appendChild(element).innerHTML = i; if(i % 7 == 0){ lottoContainer.innerHTML = lottoContainer.innerHTML + "<br>"; } } for(i=0; i<6; i++){ var num = Math.round(Math.random()*--numCount); resultTable.push(numTable[num]); numTable.splice(num,1); } }