Dla kogoś kto lubi suwaki, polecam do zabawy.
-> Tabliczka mnożenia zmieniana dynamicznie suwakiem (wymiar zmieniany suwakiem)
Efekt :
________________________________________________________
KOD HTML:
<!-- +++++++++++ style +++++++++++ -->
<link rel='stylesheet' type='text/css' href='style.css'>
<!-- +++++++++++ budowa strony +++++++++++ -->
<div id="suwak"><input type="range" id="one" min="2" max="20" value="0"/></div> <div id="trzym">Wymiar tabliczki
<t id="wym"></t> x
<t id="wym2"></t></div>
<!-- +++++++++++ skrypt +++++++++++ -->
var $ = function(id) { return document.getElementById(id); };
$('one').oninput = function()
{
$('wym').innerHTML = this.value;
$('wym2').innerHTML = this.value;
var ile = this.value;
var table = document.getElementById('tabelka');
var tableHTML = '';
for (var y=1; y<=ile; y++) {
var tr = '<tr>';
for (var x=1; x<=ile; x++) {
var tekst = x*y;
if (y==1 || x==1) {
var td = '<th class="bok">'+tekst+'
</th>';
} else {
var td = '
<td class="nbok">'+tekst+'
</td>';
}
tr += td;
}
tableHTML += tr;
}
table.innerHTML = tableHTML;
};
$('one').oninput();
KOD CSS:
html
{ /* ---
background: url(../media/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
--- */
background-color: #838384;
}
body
{
min-width: 600px !important;
max-width: 600px !important;
min-height: 540px !important;
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
font-style: normal;
color: black;
background: white;
padding: 0;
font-family: arial, sans-serif;
}
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 96%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
#suwak
{
padding-top:10px;
text-align:center;
}
#trzym
{
text-align:center;
border-collapse: collapse;
font-size:18px;
}
#tabelka
{
margin: 20px ;
margin-top:10px;
border-collapse: collapse;
}
.bok
{
background-color: #ffde84;
text-align:center;
}
.nbok
{
background-color: #f4f4f4;
text-align:center;
}