Rozdíly

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

--- krouzek:uloha_vyber_barvy [2022/10/04 20:09] – admin
+++ krouzek:uloha_vyber_barvy [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 44: / Řádek 44: @@
 ) 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>