Forum PHP.pl > [JavaScript]Zmiana odcienia tla

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Zmiana odcienia tla

ibefree

8.12.2010, 10:11:39

Witam

Mam dodać do mojego programu przyciski jasniej , ciemniej napisane w jednej funkcji tak aby zmienialy odcienie kwadratu.

<html>
<head>
<script type="text/javascript">

function fun()
{
var x= document.getElementById('text1').value;
var div = document.getElementById('div1');

div.style.backgroundColor = "rgb(" +x + "," +x + ","+x+ ")";
}
</script>
</head>
</head>

<body>
<div id="div1" style=" height:150px; width:150px ; background:black">
</div>
<br>
<br>
<br>
<form>
ustaw kolor
<input type="text" value="0" id="text1"/>
<input type="button" onclick="fun()" value="Kliknij mnie">
</form>
</body>
</html>

Jak to zrobic bo nie mam kompletnie pomyslu a w JS jestem kompletnie zielony.

modern-web

8.12.2010, 16:24:39

1. Używaj BBcode!
2. Sądzę, że to może Ci pomóc:

1. W pliku HTML strony dajesz takie oto fragmenty kodu:

[HTML] pobierz, plaintext 
<link rel="stylesheet" title="styl1" type="text/css" href="style1.css">
<link rel="stylesheet" title="styl2" type="text/css" href="style2.css">
<link rel="stylesheet" title="styl3" type="text/css" href="style3.css">
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
<script type="text/javascript">
      function zmieńStyl(nazwa)
      {
        var s = document.getElementsByTagName("link");
        if(!s) return;
        for(var i = 0; i < s.length; i++){
          if(s[i].title == nazwa)
            s[i].disabled = false;
          else
            s[i].disabled = true;
        }
      }
      function listaChange(lista)
      {
        if(lista){
          zmieńStyl(lista[lista.selectedIndex].value);
        }
      }
    </script>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
<body onload="zmieńStyl('');">
  <div>
    <input type="button" value="Reset"
           onclick="zmieńStyl('')" />
    <input type="button" value="Pierwszy styl"
           onclick="zmieńStyl('styl1')" />
    <input type="button" value="Drugi styl"
           onclick="zmieńStyl('styl2')" />
    <input type="button" value="Trzeci styl"
           onclick="zmieńStyl('styl3')" />
  </div>
  <div style="margin-top:10px;">
    <select onchange="listaChange(this);">
      <option value="">Wybierz styl</option>
      <option value="styl1">Pierwszy styl</option>
      <option value="styl2">Drugi styl</option>
      <option value="styl3">Trzeci styl</option>
    </select>
  </div>
</body>
[HTML] pobierz, plaintext

2. Pliki CSS mają zawierać:

[HTML] pobierz, plaintext 
body{
 background-color:red;
}
[HTML] pobierz, plaintext

Pozdrawiam!

celbarowicz

9.12.2010, 09:13:41

Zgłoś się na PW.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.