Permalink
Browse files

+ukazka michani barev (JS+CSS)

  • Loading branch information...
tuxmartin committed Feb 14, 2015
1 parent ae93b0d commit 293995190996ded990fe3d9a1242fe2d0f048ad1
Showing with 73 additions and 0 deletions.
  1. +73 −0 ukazka_barvy_js.html
View
@@ -0,0 +1,73 @@
<html>
<head>
<title>Barvy</title>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery -->
<script>
$(document).ready(function() {
var r = $("#barvaR").val();
var g = $("#barvaG").val();
var b = $("#barvaB").val();
$("#barvaR").change(function() {
r = $("#barvaR").val();
nastavBarvu();
});
$("#barvaG").change(function() {
g = $("#barvaG").val();
nastavBarvu();
});
$("#barvaB").change(function() {
b = $("#barvaB").val();
nastavBarvu();
});
function nastavBarvu() {
console.log("cervena=" + r + " zelena=" + g + " modra=" + b);
$("#namichanaBarva").css("background-color", "rgb(" + r + "," + g + "," + b +")");
}
});
</script>
<style>
#namichanaBarva {
border-width: 2px;
border-style: solid;
border-color: black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- do tohoto divu se nastavi namichana barva -->
<div id="namichanaBarva"></div>
<p>Vyber barvy:</p>
<form>
<!-- vstupni pole pro rozsah (slider), funguje pouze v novych prohlizecich - Internet Explorer s tim ma problemy!
http://www.html5tutorial.info/html5-range.php
-->
<input id="barvaR" type="range" min="0" max="255" step="1" /> R (0 - 255)
<br>
<input id="barvaG" type="range" min="0" max="255" step="1" /> G (0 - 255)
<br>
<input id="barvaB" type="range" min="0" max="255" step="1" /> B (0 - 255)
</form>
</body>
</html>

0 comments on commit 2939951

Please sign in to comment.