Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<p id = "pocitadlo"></p> <table> <tr> <td>OLL 1</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=R U2 R2' F R F' U2 R' F R F'&view=plan" /> </td> <td> R U2 R2' F R F' U2 R' F R F'<br /> R U B' R B R2 U' R' F R F'<br /> y R U' R2 D' r U' r' D R2 U R'<br /> r U R' U R' r2 U' R' U R' r2 U2 r'<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 2</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=F R U R' U' F' f R U R' U' f'&view=plan" /> </td> <td> F R U R' U' F' f R U R' U' f'<br /> F R U R' U' S R U R' U' f'<br /> y r U r' U2 R U2 R' U2 r U' r'<br /> F R U r' U' R U R' M' U' F'<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 3</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r' R2 U R' U r U2 r' U M'&view=plan" /> </td> <td> y' f R U R' U' f' U' F R U R' U' F'<br /> r' R2 U R' U r U2 r' U M'<br /> r' R U R' F2 R U L' U L M'<br /> y F U R U' R' F' U F R U R' U' F'<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 4</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=M U' r U2 r' U' R U' R2 r&view=plan" /> </td> <td> y' f R U R' U' f' U F R U R' U' F'<br /> M U' r U2 r' U' R U' R2 r<br /> y F U R U' R' F' U' F R U R' U' F'<br /> y' f R U R' d' l' F R U R' U' F'<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 5</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r' U2 R U R' U r&view=plan" /> </td> <td> r' U2 R U R' U r<br /> y2 l' U2 L U L' U l<br /> y2 R' F2 r U r' F R<br /> L' U' L2 F' L' F2 U' F'<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 6</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r U2 R' U' R U' r'&view=plan" /> </td> <td> r U2 R' U' R U' r'<br /> y2 l U2 L' U' L U' l'<br /> y2 R U R2 F R F2 U F<br /> y' x' D R2 U' R' U R' D' x<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 7</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r U R' U R U2 r'&view=plan" /> </td> <td> r U R' U R U2 r'<br /> L' U2 L U2 L F' L' F<br /> F R' F' R U2 R U2 R'<br /> y2 l U L' U L U2 l'<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 8</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=l' U' L U' L' U2 l&view=plan" /> </td> <td> y2 r' U' R U' R' U2 r<br /> l' U' L U' L' U2 l<br /> R U2 R' U2 R' F R F'<br /> F' L F L' U2 L' U2 L<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 9</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=R U2 R' M' U' R U' R' U M&view=plan" /> </td> <td> y R U R' U' R' F R2 U R' U' F'<br /> y2 R' U' R U' R' U R' F R F' U R<br /> r' R2 U2 R' U' R U' R' U' M'<br /> y' L' U' L U' L F' L' F L' U2 L<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr> <tr> <td>OLL 10</td> <td> <img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=R U R' y R' F R U' R' F' R&view=plan" /> </td> <td> R U R' U R' F R F' R U2 R'<br /> R U R' y R' F R U' R' F' R<br /> y2 L' U' L U L F' L2 U' L U F<br /> R U R' y' r' U r U' r' U' r<br /> </td> <td> <input type="checkbox" onchange="myScript(this)"> </td> </tr>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
table { width: 80%; margin: 0 auto; } tr { background-color: red; } td { padding: 0 5px; } #pocitadlo { position: fixed; right: 0; text-align: center; width: 10%; top: 50%; }
CSS
Autoformát
CSS reset
Až na konci
var sada = "OLL"; function myScript(elem){ if (elem.checked){ elem.parentNode.parentNode.style = "background-color: green;"; //Obarví nazeleno var number = elem.parentNode.parentNode.rowIndex + 1; //Zjistí, kolikátý je to checkbox document.cookie = sada + number + "=" + "Y"; //Uloží cookie } else { elem.parentNode.parentNode.style = "background-color: red;"; //Obarví načerveno var number = elem.parentNode.parentNode.rowIndex + 1; //Zjistí, kolikátý je to checkbox document.cookie = sada + number + "=" + "N"; //Uloží cookie } var pocet_checkboxu = $(":checkbox").length; //Zjistí, kolik je na stránce checkboxů var pocet_checklych_checkboxu = $(":checkbox:checked").length; //Zjistí, kolik je jich checklých document.getElementById("pocitadlo").innerHTML = "Umíš:<br>" + pocet_checklych_checkboxu + "/" + pocet_checkboxu; //Vypíše, kolik je checklých a kolik je jich celkem }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>