Dla kogoś kto lubi suwaki, polecam do zabawy.
-> Tabliczka mnożenia zmieniana dynamicznie suwakiem (wymiar zmieniany suwakiem)
Efekt :
________________________________________________________
KOD HTML:
<!-- +++++++++++ style +++++++++++ --> <http://december.com/html/4/element/link.html rel='stylesheet' type='text/css' href='style.css'> <!-- +++++++++++ budowa strony +++++++++++ --> <http://december.com/html/4/element/div.html id="suwak"><http://december.com/html/4/element/input.html type="range" id="one" min="2" max="20" value="0"/></http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html id="trzym">Wymiar tabliczki <t id="wym"></t> x <t id="wym2"></t></http://december.com/html/4/element/div.html> <http://december.com/html/4/element/table.html border=1 id="tabelka"></http://december.com/html/4/element/table.html> <!-- +++++++++++ skrypt +++++++++++ --> <http://december.com/html/4/element/script.html> 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+'</http://december.com/html/4/element/th.html>'; } else { var td = '<http://december.com/html/4/element/td.html class="nbok">'+tekst+'</http://december.com/html/4/element/td.html>'; } tr += td; } tr += '</http://december.com/html/4/element/tr.html>'; tableHTML += tr; } table.innerHTML = tableHTML; }; $('one').oninput(); </http://december.com/html/4/element/script.html>
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; }
Wrzuć sobie na Githuba, może ktoś się zainteresuje.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)