Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Nie działa skrypt JS
michuwsh
post 21.06.2018, 22:35:27
Post #1





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

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


Hej mam problem potrzebuje pobrać akapity o klasie "demo" do tablicy/obiektu policzyć ile występuje takich akapitów o klasie demo i wyświetlić każdy z osobna z 2 sekundowym timeoutem w pojemniku div o nazwie test. Ma to być coś na zasadzie slidera ale zamiast zdjęć ma zmieniać się tekst. Moj kod wygląda tak :
  1.  
  2. <!doctype html>
  3.  
  4. <html lang="pl">
  5. <meta charset="utf-8">
  6.  
  7. <title>Pierwszy test</title>
  8. <meta name="description" content="The HTML5 Herald">
  9. <meta name="author" content="SitePoint">
  10.  
  11. <link rel="stylesheet" href="css/styles.css?v=1.0">
  12.  
  13.  
  14. </head>
  15.  
  16. <p class="demo">To jest pierwszy przykładowy tekst do js</p>
  17. <p class="demo">To jest drugi przykładowy tekst do js</p>
  18. <p class="demo">To jest trzeci przykładowy tekst do js</p>
  19. <div id="test"></div>
  20.  
  21. var x = document.getElementsByClassName("demo");
  22. var liczba = x.length;
  23. var i;
  24. change();
  25. function change() {
  26. for (i=0; i < liczba; i++) {
  27. var stan = x[i].innerHTML;
  28. document.getElementById('test').innerHTML = stan;
  29.  
  30. }
  31. setTimeout(change, 2000);
  32. }
  33.  
  34. </script>
  35. </body>
  36. </html>
  37.  
Go to the top of the page
+Quote Post
markuz
post 22.06.2018, 12:09:34
Post #2





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

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


Teraz co 2 sekundy podmieniasz treść diva o id test 3 razy - więc finalnie będziesz widział tylko treść ostatniego diva za każdym razem. Zmienną i musisz trzymać poza pętlą (tak jak jest obecnie) i zwiększać ją tylko raz (lub zmniejszać do 0) w funkcji change.


--------------------
Go to the top of the page
+Quote Post
olszam
post 25.06.2018, 12:56:35
Post #3





Grupa: Zarejestrowani
Postów: 342
Pomógł: 23
Dołączył: 20.01.2011
Skąd: Chełm

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


  1. function change() {
  2. var i=0;
  3. setInterval(function(){
  4. if(i<liczba){
  5. var stan = x[i].innerHTML;
  6. document.getElementById('test').innerHTML = stan;
  7. i=i+1;
  8. }else{
  9. i = 0;
  10. var stan = x[i].innerHTML;
  11. document.getElementById('test').innerHTML = stan;
  12. i=i+1;
  13. }
  14. }, 2000);
  15.  
  16. }

tą funkcję mógłbyś tak zmienić jeśli ci zależy na ciągłym wracaniu do początku
Go to the top of the page
+Quote Post
trueblue
post 25.06.2018, 13:13:17
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


To już prościej tak:
  1. function change() {
  2. var i=0;
  3. setInterval(function(){
  4. if(i<liczba){
  5. var stan = x[i].innerHTML;
  6. }else{
  7. var stan = x[0].innerHTML;
  8. i=1;
  9. }
  10. i++;
  11. document.getElementById('test').innerHTML = stan;
  12. }, 2000);
  13. }

albo wręcz tak:
  1. function change() {
  2. var i=0;
  3. setInterval(function(){
  4. i %= liczba;
  5. var stan = x[i++].innerHTML;
  6. document.getElementById('test').innerHTML = stan;
  7. }, 2000);
  8. }


--------------------
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 17:25