Dla kogoś kto lubi suwaki, polecam do zabawy.

-> Tabliczka mnożenia zmieniana dynamicznie suwakiem (wymiar zmieniany suwakiem)


Efekt :


________________________________________________________

KOD HTML:

[HTML] pobierz, plaintext 
 
<!--   +++++++++++   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>
<table border=1 id="tabelka"></table>
 
 
<!--   +++++++++++   skrypt   +++++++++++  -->
<script>
      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; 
    }
    tr += '</tr>'; 
 
    tableHTML += tr; 
}
 
table.innerHTML = tableHTML;
};
 
$('one').oninput();	 
</script>
 
 
[HTML] pobierz, plaintext 

KOD CSS:

[HTML] pobierz, plaintext 
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;
}
 
[HTML] pobierz, plaintext 

Wrzuć sobie na Githuba, może ktoś się zainteresuje.