krouzek:uloha_vyber_barvy

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revize Předchozí verze
Následující verze		 Předchozí verze
krouzek:uloha_vyber_barvy [2022/10/04 20:06] – adminkrouzek:uloha_vyber_barvy [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
Řádek 1: Řádek 1:
-=== Výběr barvy ===+===== Výběr barvy =====
 ''%%rgb(255,0,255)%%'' respektive ''%%#ff00ff%%'' ''%%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. 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.
Řádek 10: Řádek 10:
  
  
-Postupné úkoly:+====Postup==== 
  1) ze šablony vytvoř stránku, na které bude ''%%<div id="color"></div>%%'' - ten nebude vidět  1) ze šablony vytvoř stránku, na které bude ''%%<div id="color"></div>%%'' - ten nebude vidět
  
Řádek 43: Řádek 44:
  
  10) Změň vstupy z ''%%type="number"%%'' na ''%%type="range"%%'' a přidej atributy ''%%min="0" max="255"%%''  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.1664913970.txt.gz
  • Poslední úprava: 2023/11/15 20:54
  • (upraveno mimo DokuWiki)