[JS,HTML] Skrypt wyświetlający wybrany obraz w wybrany dzień.

pytanie zadane 5 maja 2020 w JavaScript przez MozajkaPL Początkujący (280 p.)

Witam!

Chciałem stworzyć na mojej stronie element wyświetlający wybrany obraz, tylko w wybrane dni, np. 24 grudnia wyświetla obraz o nazwie banner1.jpg, 11 listopada wyświetla obraz o nazwie banner2.jpg itd.

Mam już kod, ale napotkałem dość duży problem. Nie potrafię wybrać tam dokładnej daty.

Dokładniej wszystko opisane jest za znakami // w kodzie.

Kod:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE= "JavaScript" type= "text/javascript">

function printBanner()
{
  data = new Date();
  dokladnadata = data.getData();
  if(dokladnadata > 12,24 || dokladnadata < 12,28) num = 1; //miedzy 24 a 28 grudnia ma wyswietlac banner1
  else if(dokladnadata >= 11,11 && dokladnadata < 11,12) num = 2; //miedzy 11 a 12 listopada ma wyswietlac banner2
  else if(dokladnadata >= 05,01 && dokladnadata < 05,05) num = 3; //miedzy 1 a 5 maja ma wyswietlac banner3
  else if(dokladnadata >= 01,18 && dokladnadata < 01,22) num = 4; //miedzy 18 a 22 stycznia ma wyswietlac banner4
  else num=5; //jezeli nie ma zadnej z powyzszych dat, ma wyswietlac banner5
  name = "banner" + num + ".jpg";
  tekst = "<IMG SRC='" + name + "'>";
  document.write(tekst);
}

</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE= "JavaScript" type= "text/javascript">
printBanner();

</SCRIPT>
</BODY>
</HTML>

Po otwarciu strony z tym kodem, nic się nie wyświetla.

Z góry dziękuję za odpowiedź

1 odpowiedź

odpowiedź 5 maja 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 5 maja 2020 przez MozajkaPL

Najlepsza

Użyj funkcji:

getDate()

żeby otrzymać dzień i

getMonth() + 1

żeby otrzymać miesiąc (getMonth() zwraca 0-11)

i później ustal odpowiednie warunki

        function printBanner(){
            const date = new Date();
            const day = date.getDate();
            const month = date.getMonth()+1;

            if(
                (day >= 24 && month == 12) ||
                (day <= 28 && month == 12)
            ){
                // banner 1
            }else if(
                (day >= 11 && month == 11) ||
                (day <= 12 && month == 11)
            ){
                // banner 2
            }else if(
                (day >= 1 && month == 5) ||
                (day <= 5 && month == 5)
            ){
                //banner 3
            }else if(
                (day >= 18 && month == 1) ||
                (day <= 22 && month == 1)
            ){
                //banner 4
            } else {
                //banner 5
            }
        }
                
         printBanner();

komentarz 5 maja 2020 przez MozajkaPL Początkujący (280 p.)

Jestem nowy w JS. Zastosowałem się do tego co napisałeś i stworzyłem to:

<HTML>

  <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
      
function printBanner(){
    const date = new Date();
    const day = date.getDate();
    const month = date.getMonth()+1;
 
    if(
        (day >= 24 && month == 12) ||
        (day <= 28 && month == 12) num = 1;
    ){
        // banner 1
    }else if(
        (day >= 11 && month == 11) ||
        (day <= 12 && month == 11) num = 2;
    ){
        // banner 2
    }else if(
        (day >= 1 && month == 5) ||
        (day <= 5 && month == 5) num = 3;
    ){
        //banner 3
    }else if(
        (day >= 18 && month == 1) ||
        (day <= 22 && month == 1) num = 4;
    ){
        //banner 4
    } else { num = 5;
        //banner 5
    }


        name = "banner" + num + ".jpg";
        tekst = "<IMG SRC='" + name + "'>";
        document.write(tekst);
      } 
      printBanner();

    </SCRIPT>
  </HEAD>

  <BODY>
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
      printBanner();

    </SCRIPT>
  </BODY>

</HTML>

Mimo to dalej nie działa.

Mógłbyś napisać co tam trzeba poprawić?

komentarz 5 maja 2020 przez DawidK Nałogowiec (37,910 p.)

Przenieś num w miejsce gdzie były komentarze.

 if(
          (day >= 24 && month == 12) ||
          (day <= 28 && month == 12)
      ){
            num = 1;

To sprawi, że będzie działać, polecałbym Ci jednak przeczytać:

- poczytanie o kodowaniu znaków iso / utf

- o modyfikacjach DOM (dodawanie elementów)

- o obiekcie image

- zasięgu zmiennych

Bardzo fajną książką w bardzo przystępny sposób tłumacząca podstawy JS (dużo się z niej nauczyłem i odpowiadał mi sposób tłumaczenia) jest Javascript Przewodnik dla absolutnie początkujących kosztuje ok 30zł i moim zdaniem jest zdecydowanie wart tej ceny.

komentarz 5 maja 2020 przez MozajkaPL Początkujący (280 p.)

Zrobiłem tak jak napisałeś i na pierwszy rzut oka, wszystko jest ok, ALE z tego co zauważyłem skrypt zwraca uwagę tylko na miesiąc. Tzn. jeżeli wpiszę np.:

else if(
        (day >= 11 && month == 05) ||
        (day <= 19 && month == 05) 
    ){ num = 2;

to i tak wyświetla mi się obrazek numer 2, mimo, że jest dopiero 5.05

Cały kod:

<HTML>

  <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
      
function printBanner(){
    const date = new Date();
    const day = date.getDate();
    const month = date.getMonth()+1;
 
    if(
        (day >= 24 && month == 12) ||
        (day <= 28 && month == 12) 
    ){ num= 1;
        // banner 1
    }else if(
        (day >= 11 && month == 05) ||
        (day <= 19 && month == 05) 
    ){ num = 2;
        // banner 2
    }else if(
        (day >= 1 && month == 03) ||
        (day <= 2 && month == 03) 
    ){ num = 3;
        //banner 3
    }else if(
        (day >= 18 && month == 01) ||
        (day <= 22 && month == 01) 
    ){ num = 4;
        //banner 4
    } else { num = 5;
        //banner 5
    }


        name = "banner" + num + ".jpg";
        tekst = "<IMG SRC='" + name + "'>";
        document.write(tekst);
      } 


    </SCRIPT>
  </HEAD>

  <BODY>
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
      printBanner();

    </SCRIPT>
  </BODY>

</HTML>

P.S. Dzięki za polecenie książki.

komentarz 5 maja 2020 przez DawidK Nałogowiec (37,910 p.)

Masz racje, mój błąd w dodatku mega głupi. Warunek logiczny powinien byc inny

 if(
            (day >= 24 && month == 12) &&
            (day <= 28 && month == 12)
        ){
            num = 1;
        }else if(
            (day >= 11 && month == 11) &&
            (day <= 12 && month == 11)
        ){
            num = 2;
        }else if(
            (day >= 1 && month == 5) &&
            (day <= 5 && month == 5)
        ){
            num = 3;
        }else if(
            (day >= 18 && month == 1) &&
            (day <= 22 && month == 1)
        ){
            num = 4;
        } else {
            num = 5;
        }

To co napisałem wyżej bierze pod uwagę miesiac i wystarczy, że będzie powyżej jednego dnia lub poniżej drugiego dnia trzeba zamienić || (lub) na && (i)