Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Generowanie kolorów pośrednich
PiNkOs
post
Post #1





Grupa: Zarejestrowani
Postów: 76
Pomógł: 4
Dołączył: 27.02.2009

Ostrzeżenie: (0%)
-----

Witam,

Jestem w trakcie tworzenia pewnej aplikacji, która odlicza co 1s do liczby X.

Chodzi mi oto, że:

% to liczba obecna z X

1% - to kolor czerwony
2% - 49% - kolory co raz bardziej zbliżane do koloru żółtego. (przejscie z czerwonego na żółty)
50% - kolor żółty
51-99% - kolory co raz bardziej zbliżane do koloru zielonego (przejscie z zółtego na zielony)
100% - kolor zielony

[[[Pętla zaczyna się od nowa

Wiem, że da radę coś takiego zrobić (tylko nie znam się w ogóle na rgb)

Prosze o jakis przykład

Pozdrawiam

Ten post edytował PiNkOs 15.11.2010, 09:05:26
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
thek
post
Post #2





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
Nie działa, bo wypluwasz zmianę wartości dopiero po przeleceniu całej pętli. Ty zaś musisz to robić dynamicznie, czyli niejako w trakcie trwania samych pętli.
Bezpieczniej będzie:
Czerwony (255,0,0)
Ruszasz tylko 2 wartość jako różnica/liczba_kroków
Żółty(255,255,0)
Ruszasz tylko 1 wartość jako różnica/liczba_kroków
Zielony(0,255,0)
Wracasz do czerwonego albo skokiem, albo znów idąc krokowo, jako: ruszasz 1 i 2 jako różnica/liczba_kroków

Tak więc 255/50 = 5.1 możliwe do obliczenia już na starcie, bo wszędzie taka różnica jest używana.
for(var i = 0; i <=50 ; ++i) {
rgb(255, i*5.1, 0);
}
for(var i = 50; i > 0 ; --i) {
rgb(i*5.1, 255, 0);
}
A tu już albo skok tego od nowa, albo pętla
for(var i = 50; i > 0 ; --i) {
rgb(255-i*5.1, i*5.1, 0);
}
A jak to ująć by skrypt ładnie działał i nie wywalał się? Pomyśl... Skrypt musi być szybki i zwracać wynik. Jeśli puścisz go w nieskończonej pętli - zawiesi się i stronę, więc nie można tak. Powinien zwracać jakąś wartość, a więc uzależnij go od czegoś jako parametr. Przykład? Wiesz ile skrypt ma kroków, bo ma ich 100 (lub 150, zależnie od wersji), więc użyj tego i wprowadzaj krok jako parametr do obliczenia. Jeśli wartość będzie z zakresu 0-50 zmieniaj kolor z czerwonego do żółtego, jeśli 51-100 to z żółtego do zielonego (a od 101 do 150 z zielonego do czerwieni), a więc masz do sprawdzenia jakąś zmienną i wedle niej modulo x kroków +1, czyli modulo 101 (lub 151).

Nie wierzysz że to proste? Zobacz jak mały to jest kod, który tylko o 3 IFy oparłem (IMG:style_emoticons/default/winksmiley.jpg) 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" charset="utf-8">
  4. function setColor(krok) {
  5.     krok = krok%151;
  6.     if(krok < 51) {
  7.         document.getElementById('box').style.backgroundColor = 'rgb(255, ' + parseInt(krok*5.1) + ', 0)';
  8.     }
  9.     if(krok > 50  && krok < 101 ) {
  10.         document.getElementById('box').style.backgroundColor = 'rgb(' + parseInt((100-krok)*5.1) + ', 255, 0)';
  11.     }
  12.     if(krok > 100 && krok < 151) {
  13.         document.getElementById('box').style.backgroundColor = 'rgb(' + parseInt((krok-100)*5.1) + ', ' + parseInt((150-krok)*5.1) + ', 0)';
  14.     }
  15. }
  16. function change_step( step ) {
  17.     setColor(step);
  18.     licznik++;
  19. }
  20. var licznik = 0;
  21. </script>
  22. </head>
  23. <body>
  24. <div id="box" style="width:200px;height:100px;background-color:#ff0000;" onclick="setInterval( 'change_step(licznik)', 25);"></div>
  25. </body>
  26. </html>
[HTML] pobierz, plaintext
Skopiuj do pliku, uruchom w przeglądarce i kliknij na prostokącie, a zacznie sobie zmieniać kolorki. To działa oczywiście z kolorami w RGB, ale możesz napisać konwerter na wartości HEX i też będzie działać. RGB nie działa bowiem z wszystkimi IE (IMG:style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post

Posty w temacie
- PiNkOs   Generowanie kolorów pośrednich   15.11.2010, 09:04:11
- - thek   Pytanie nr 1: Jakie wartości rgb (lub hex) mają ko...   15.11.2010, 13:36:30
- - PiNkOs   No OK Zielony: rgb(0, 255, 0) Czerwony: rgb(25...   15.11.2010, 18:15:51
- - ShadowD   Żółty - zielony ruszasz tylko R Żółty - czerwony ...   15.11.2010, 19:17:35
- - PiNkOs   Wykodziłem coś takiego: [PHP] pobierz, plaintext ...   15.11.2010, 19:57:41
- - thek   Nie działa, bo wypluwasz zmianę wartości dopiero p...   16.11.2010, 12:19:58
- - PiNkOs   Dzięki za poświęcenie czasu. Ale teraz... chce pr...   16.11.2010, 19:41:06
- - thek   Podpowiem tylko, bo ruszenie tego co już Ci podałe...   17.11.2010, 10:35:34
- - PiNkOs   Heh dzięki bardzo za poświęcenie czasu i cierpliwo...   20.11.2010, 18:25:27

« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 30.12.2025 - 23:01
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn