Quantcast
Channel: Forum Pasja Informatyki - Najnowsze pytania bez odpowiedzi
Viewing all articles
Browse latest Browse all 21998

Animacja lotto 49 kul | Js / HMTL / CSS

$
0
0

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&amp;subset=latin-ext" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Bungee+Inline&amp;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">
			 &lt; LOTTO &gt;
			</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);
	}
}

http://www67.zippyshare.com/v/sWCkowxl/file.html


Viewing all articles
Browse latest Browse all 21998

Latest Images