laby4

<html>
<head>
  <meta charset="UTF-8">
  <style>
    #square{
      width: 300px;
      height: 300px;
      background-color: gray;
      border: 1px solid black;
      margin-left: 30px;
      float: left;
    }
    #square2{
      width: 300px;
      height: 300px;
      background-color: gray;
      border: 1px solid black;
      margin-left: 30px;
      float: left;
    }
    #form{
      margin-top: 40px;
    }
    input[type=button]{
      display:block;
      margin-top: 30px;
      margin-left: 30px;
    }

  </style>
  <script type="text/javascript">
    var odcienKoloru=50;
    var losowy_kolor = 0;
    var numer_pomiaru = 1;

    function ustawKolor()
    {
      kwadrat = document.getElementById("square");
      losowy_kolor = Math.floor(Math.random() * 100);
      wartosc = losowy_kolor;
      kwadrat.style.backgroundColor="rgb("+wartosc+"%,"+wartosc+"%,"+wartosc+"%)";
    }
    function jasnosc(val)
    {
      kwadrat = document.getElementById("square2");
      if(val=="jasniej"){
        odcienKoloru += 5;
        wartosc = odcienKoloru;
        kwadrat.style.backgroundColor="rgb("+wartosc+"%,"+wartosc+"%,"+wartosc+"%)";
      }
      if(val=="ciemniej"){
        odcienKoloru -= 5;
        wartosc = odcienKoloru;
        kwadrat.style.backgroundColor="rgb("+wartosc+"%,"+wartosc+"%,"+wartosc+"%)";
      }

    }

    function ok() {
        document.getElementById("tabela").innerHTML += "<tr><td>" + numer_pomiaru + "</td><td>" + losowy_kolor +"</td><td>" + odcienKoloru + "</td><td>" + Math.abs(losowy_kolor - odcienKoloru) + "</td></tr>";
        numer_pomiaru++;
    }

    function czysc() {
        numer_pomiaru= 1;
        document.getElementById("tabela").innerHTML = "";
    }
  </script>
</head>

<body>
  <div id="square"></div>
  <div id="square2"></div>
  <form id="form">
    <input type="button" value="Ustaw Kolor" onclick="ustawKolor()"/>
    <input id="jasniej" type="button" value="Jasniej" onclick="jasnosc(this.id)"/>
    <input id="ciemniej" type="button" value="Ciemniej" onclick="jasnosc(this.id)"/>
    <input type="button" value="OK" onclick="ok()"/>
    <input type="button" value="Czyść" onclick="czysc()"/>
  </form>
  <table border="1">
    <tr>
        <th>Numer pomiaru</th>
        <th>Kolor losowy</th>
        <th>Kolor wybrany</th>
        <th>Różnica</th>
    </tr>
    <tbody id="tabela">

    </tbody>
  </table>
</body>
</html>