Zobrazit stránkuStarší verzeZpětné odkazyNahoru Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku. ===== Výběr barvy ===== ''%%rgb(255,0,255)%%'' respektive ''%%#ff00ff%%'' Cíl: mít tři slidery reprezentující červenou, zelenou a modrou složku barvy. Při změně (libovolné r g b hodnoty) chci výslednou barvu zobrazit uživateli. <code html> <input type="range" min="0" max="255" value="50" class="slider" id="redValue"> <input type="range" min="0" max="255" value="50" class="slider" id="greenValue"> <input type="range" min="0" max="255" value="50" class="slider" id="blueValue"> </code> ====Postup==== 1) ze šablony vytvoř stránku, na které bude ''%%<div id="color"></div>%%'' - ten nebude vidět 2) zobraz ten div jako čtverec ve stránce, třeba s použitím následujícího css: ''%%#color {width:100px; height:100px; background-color: rgb(255,0,0)}%%'' 3) nastav divu background-color pomocí javascriptu. Pozor, pomlčka se mění na camelCase: <code javascript> document.getElementById('color').style.backgroundColor='rgb(0,255,0)' </code> 4) vytvoř funkci ''%%zmenBarvu()%%'' do které dej kód co mění barvu divu - z předchozího bodu 5) změnu barvy navaž na stisknutí tlačítka ''%%<button onclick="zmenBarvu()">%%'' 6) uvniř funkce ''%%zmenBarvu%%'' vytvoř tři proměnné obsahující číslo a jejich hodnoty pošli do řetězce specifikujícího barvu: <code javascript> const red = 120 const green = 200 const blue = 0 document.getElementById('color').style.backgroundColor=`rgb(${red},${green},${blue})` </code> (s použitím [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals|Šablon hodnot]] ) 7) do html vlož 3 inputy, nazvi je red, green, blue - uživatel tam bude psát čísla, tak můžeš použít ''%%<input type="number" id="red">%%'' 8) uvnitř svojí funkce ''%%zmenBarvu()%%'' hodnoty red, green a blue načti z hodnot příslušných inputů: <code javascript> const red = parseInt(document.getElementById('red').value) </code> 9) přidej kód, který při změně hodnoty inputu zavolá funkci zmenBarvu (''%%<input type="number" id="red" oninput="zmenBarvu()">%%'') 10) Změň vstupy z ''%%type="number"%%'' na ''%%type="range"%%'' a přidej atributy ''%%min="0" max="255"%%'' --------- ==== Řešení ==== <code html> <!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>Barvy</title> <style> /* Vychozi CSS stylovani prijde sem*/ body {background-color: rgb(200,200,200);} body { margin:0; } div#svetlo { background-color: rgb(255, 100, 255); border: 10px solid black; width: 100px; height: 100px; } /* */ </style> <script> /* <![CDATA[ */ /* Sem prijde javascript kod */ console.log('test') function zmenNeco(){ const red = parseInt(document.getElementById('redValue').value) const green = parseInt(document.getElementById('greenValue').value) const blue = parseInt(document.getElementById('blueValue').value) console.log(red+green+blue) document.getElementById('svetlo').style. backgroundColor=`rgb(${red}, ${green}, ${blue})` "rgb(" + red + ", " + green + ", " + blue + ")" } /* ]]> */ </script> </head> <body> <div id="svetlo"></div> <h2>Barvy</h2> <input type="range" min="0" max="255" value="50" class="slider" id="redValue" oninput="zmenNeco()" > <input type="range" min="0" max="255" value="50" class="slider" id="greenValue" oninput="zmenNeco()" > <input type="range" min="0" max="255" value="50" class="slider" id="blueValue" oninput="zmenNeco()" > </body> </html> </code> krouzek/uloha_vyber_barvy.txt Poslední úprava: 2023/11/15 20:54autor: 127.0.0.1