JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<meta charset="UTF-8">
<meta name="description" content="<?php echo $page_title; ?>">
<meta name="keywords" content="<?php echo strtolower($page_title); ?>">
<meta name="author" content="kornilov">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="slike/favicon.ico"> <!-- ikona za vrstico brskalnika -->
<link type="text/css" rel="stylesheet" href="css/simplePagination.css"> <!-- style za simplePagination za Igralnico -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <!-- *** CSS za jQuery-UI za Vragolije-loterija -->
<script src="//code.jquery.com/jquery-1.8.3.js"></script> <!--Vključi jQuery;če kaj ne deluje pri UI, daj novejšega jquery-1.10.2.js -->
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <!-- *** jQuery-UI za Vragolije-loterija -->
</head>
<article class="padding_15_920_15">
<section class="width_890">
<h2>Loto</h2>
<form>
<input type="number" id="izbranih_stevil" name="quantity" min="7" max="13"><label> Izpljuni od 7 do 13 števil</label>
</form>
<div id="streha">
<div id="nadrejen">
</div>
</div>
<div>
<form>
<input type="button" value="Loto" id="loto_vnos">
<input type="button" value="Razvrsti" id="loto_razvrsti">
</form>
</div>
</section>
<section class="width_890">
<h2>Loto po meri</h2>
<form>
<input type="number" id="st_max" name="quantity" min="1" max="100"><label> Koliko števil je na srečki? </label>
<input type="number" id="izbranih_stevil_vas" name="quantity" min="1" max="20"><label> Izpljuni od 1 do 20 števil</label>
</form>
<div id="streha_vas">
<div id="nadrejen_vas">
</div>
</div>
<div>
<form>
<input type="button" value="Loto po meri" id="loto_vnos_vas">
<input type="button" value="Razvrsti" id="loto_razvrsti_vas">
</form>
</div>
</section>
<section class="width_890">
<h2>Eurojackpot</h2>
<div id="streha_euro">
<div...
CSS
#nadrejen, #nadrejen_vas, #nadrejen_euro, #nadrejen_bonus {
display: inline-block;
width: 890px; min-height:25px;
margin: 5px 0;
color:white;
}
#nadrejen_euro, #nadrejen_bonus {
width:294px;
}
.vrsta, .vrsta_vas, .vrsta_euro, .vrsta_bonus {
display: inline-block;
}
.zapored_2, .zapored_vas_2, .zapored_euro_2, .zapored_bonus_2 {
display: inline-block;
padding:5px;
margin:5px 7px;
background: #2b353f; /* navadno ozadje v eni barvi, v primeru da ne podpirajo gradientov */
background: radial-gradient(circle, #2b353f 45%, #FFDA88 100%); /* ozadje v radialnem gradientu v formi kroga */
width:25px;
height:25px;
text-align: center;
box-shadow: 1px 1px 2px 2px #2B353F;
border-radius: 22.5px 22.5px 22.5px 0; /* zaokorženi robovi */
-webkit-border-radius: 22.5px 22.5px 22.5px 0;
-moz-border-radius: 22.5px 22.5px 22.5px 0;
}
.zapored_bonus_2 {
background: #776F22; /* navadno ozadje v eni barvi, v primeru da ne podpirajo gradientov */
background: radial-gradient(circle, #776F22 38%, #FFDA88 90%); /* ozadje v radialnem gradientu v formi kroga */
}
JavaScript
$(document).ready(function() { // dinamično vstavi html elemente "div" pod "div"
var stevilo = $('#nadrejen');
var i;
for (i=1; i<=39; i++) { // "39" števil podrejenih elementov "div" za loto
stevilo.append("<div class='vrsta'><div id='loto" + i + "' class='zapored zapored_2'></div></div>");
}
var stevilo_vas = $('#nadrejen_vas');
var i_vas;
for (i_vas=1; i_vas<=100; i_vas++) { // "100" števil podrejenih elementov "div" za "Vaš loto po meri"
stevilo_vas.append("<div class='vrsta_vas'><div id='vas" + i_vas + "' class='zapored_vas zapored_vas_2'></div></div>");
}
var stevilo_euro = $('#nadrejen_euro');
var i_euro;
for (i_euro=1; i_euro<=50; i_euro++) { // "50" število podrejenih elementov "div" za EuroJackpot
stevilo_euro.append("<div class='vrsta_euro'><div id='euro" + i_euro + "' class='zapored_euro zapored_euro_2'></div></div>");
}
var stevilo_bonus = $('#nadrejen_bonus');
var i_bonus;
for (i_bonus=1; i_bonus<=2; i_bonus++) { // "2" število podrejenih elementov "div" za EuroJackpot bonus
stevilo_bonus.append("<div class='vrsta_bonus'><div id='bonus" + i_bonus + "' class='zapored_bonus zapored_bonus_2'></div></div>");
}
$('div').removeClass('zapored_2 zapored_vas_2 zapored_euro_2 zapored_bonus_2'); // odstrani razred v div; skrij mesta za števila
});
$(document).ready(function() {
// Začetek: shuffle function using the Fisher-Yates algorithm. This algorithm provides uniform random.
/* Add a shuffle function to Array object prototype
Usage : var tmpArray = ["a", "b", "c", "d", "e"];
tmpArray.shuffle(); */
Array.prototype.shuffle = function (){ // funkcija za random sortiranje elementov polja; Fisher-Yates algorithm
var i = this.length, j, temp;
if ( i === 0 ) { return; }
while ( --i ) {
j = Math.floor( Math.random() * ( i + 1 ) );
temp = this[i];
this[i] = this[j];
this[j] = temp;
}
};
// Konec: shuffle function using...