colormixer.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta charset="utf-8">
   5                 <title>COLOR-Mixer</title>
   6                 <script type="text/javascript">
   7                         window.addEventListener("DOMContentLoaded",reset);
   8                         window.addEventListener("DOMContentLoaded",hide);
   9                         window.addEventListener("input",calculate);
  10
  11                         function calculate(){
  12                                 var r=document.getElementsByTagName('input')[0].value*256/100;
  13                                 var g=document.getElementsByTagName('input')[1].value*256/100;
  14                                 var b=document.getElementsByTagName('input')[2].value*256/100;
  15                                 var a=document.getElementsByTagName('input')[3].value*1/100;
  16                                 document.getElementById('out').style.background="rgba("+r+","+g+","+b+","+a+")";
  17                                 var darkness=1-document.getElementsByTagName('input')[4].value*1/100;
  18                                 document.getElementById('hide').style.opacity=darkness;
  19                                 }
  20                         function reset(){
  21                                 document.getElementsByTagName('input')[0].value=50;
  22                                 document.getElementsByTagName('input')[1].value=50;
  23                                 document.getElementsByTagName('input')[2].value=50;
  24                                 document.getElementsByTagName('input')[3].value=50;
  25                                 document.getElementsByTagName('input')[4].value=50;
  26                                 calculate();
  27
  28                                 }
  29                         function save(){
  30                                 document.cookie=document.getElementsByName('out')[0].style.backgroundColor;
  31                                 }
  32                         function load(){
  33                                 if(document.cookie){
  34                                         document.getElementById('out').style.backgroundColor=document.cookie;
  35                                 }
  36                                 else{
  37                                         window.alert("Keine Farbe Abgespeichert!");
  38                                         }
  39
  40                                 }
  41                         function hide(){
  42                         document.getElementById('hide').style.left=document.getElementById('out').style.left;
  43                         document.getElementById('hide').style.top=document.getElementById('out').style.top;
  44
  45                                 }
  46                 </script>
  47                 <style>
  48                         input{position:absolute;left:140px}
  49                 </style>
  50         </head>
  51         <body>
  52                 <div style="background:red;width:130px;position:absolute;left:10px"><center>RED</center></div><input type="range" ><br>
  53                 <div style="background:green;width:130px;position:absolute;left:10px"><center>GREEN</center></div><input type="range"><br>
  54                 <div style="background:blue;width:130px;position:absolute;left:10px"><center>BLUE</center></div><input type="range"><br>
  55                 <div style="background:white;width:130px;position:absolute;left:10px"><center>SATURATION</center></div><input type="range"><br>
  56                 <div style="background:white;width:130px;position:absolute;left:10px"><center>BRIGHTNESS</center></div><input type="range"><br><br>
  57
  58         <!--    <button onclick="reset();calculate()">FARBE ZURÜCKSETZTEN</button><button onclick="save()">FARBE SPEICHERN</button><button onclick="load()">FARBE LADEN</button><br><br>-->
  59                 <div id="hide"style="width:150px;height:150px;position:absolute;background-color:black"></div>
  60                 <div id="out"style="width:150px;height:150px;top:150px;left:10px;position:absolute"></div>
  61
  62
  63
  64
  65         </body>
  66 </html>