Przykładowe skrypty
Wyświetlanie informacji w konsoli, sprawdzanie wpisanych haseł
F12 - otwieranie widoku konsoli
<script> function przycisk3() { if (formularz.haslo1.value!=formularz.haslo2.value) alert("Podane hasła różnią się"); console.log("Witaj " + formularz.imie.value + " " + formularz.nazwisko.value); } </script>
Ukrywanie / wyświetlanie elementów
<script> function ukryj1() { document.getElementById("blok1").style.visibility = "hidden"; document.getElementById("blok2").style.visibility = "visible"; } function ukryj2() { document.getElementById("blok2").style.visibility = "hidden"; document.getElementById("blok3").style.visibility = "visible"; } </script>
Obliczenia / dołączanie informacji
<script> function paliwo() { var wartosc=0; if (document.getElementById("rodzaj").value=="1") wartosc=4*document.getElementById("litry").value; else if (document.getElementById("rodzaj").value=="2") wartosc=3.5*document.getElementById("litry").value; var koszt=document.createElement("p"); koszt.innerHTML=("koszt paliwa: "+wartosc+"zł"); lewy.appendChild(koszt); } </script>
Ukrywanie / wyświetlanie elementów, postęp paska stanu
<script> function aktywujaca(a) { document.getElementById("pierwszy").style.display="none"; document.getElementById("drugi").style.display="none"; document.getElementById("trzeci").style.display="none"; if(a==1) document.getElementById("pierwszy").style.display="block"; if(a==2) document.getElementById("drugi").style.display="block"; if(a==3) document.getElementById("trzeci").style.display="block"; } var szerokosc=4; function pasek() { szerokosc+=12; if(szerokosc>100) szerokosc=100; document.getElementById("pusty").style.width=szerokosc+'%'; } </script>
Sprawdzanie wybranej opcji i wyświetlanie informacji w paragrafie
<script> function odkryj() { var cena=0; if (document.getElementById("krotkie").checked) cena=15; if (document.getElementById("srednie").checked) cena=20; if (document.getElementById("poldlugie").checked) cena=30; if (document.getElementById("dlugie").checked) cena=40; document.getElementById("koszt").innerHTML=("cena promocyjna: "+cena); } </script>
Obliczanie łącznego kosztu za zabiegi
<script> function oblicz() { var wartosc=0; var peeling=document.getElementById("peeling").checked; var maska=document.getElementById("maska").checked; var masaz=document.getElementById("masaz").checked; var makijaz=document.getElementById("makijaz").checked; wartosc=peeling*45+maska*30+masaz*20+makijaz*50; document.getElementById("cena").innerHTML=("Cena zabiegów: "+wartosc); } </script>
Poprzednie / następne zdjęcie w galerii
<script> var numer=1; var obraz=document.getElementById("obraz_srodkowy"); function poprzednie() { if (numer==1) numer=7; else numer--; obraz.src=numer+".jpg"; } function nastepne() { if (numer==7) numer=1; else numer++; obraz.src=numer+".jpg"; } </script>
Filtry - rozmycie, sepia, negatyw,
odcienie szarości / kolor,
przezroczystość,
zmiana jasności
<script> function pszczola() { if (document.getElementById("blur").checked) document.getElementById("pszczolaimg").style.filter="blur(5px)"; else if (document.getElementById("sepia").checked) document.getElementById("pszczolaimg").style.filter="sepia(100%)"; else if (document.getElementById("negatyw").checked) document.getElementById("pszczolaimg").style.filter="invert(100%)"; } function kolorowy(){ document.getElementById("pomaranczaimg").style.filter="grayscale(0%)"; } function czarno_bialy() { document.getElementById("pomaranczaimg").style.filter="grayscale(100%)"; } function owoce() { let x=document.getElementById("suwak1").value; document.getElementById("owoceimg").style.filter="opacity("+x+"%)"; } function zolw() { let x=document.getElementById("suwak2").value; document.getElementById("zolwimg").style.filter="brightness("+x+"%)"; } </script>
Chat
<script> function wyslij() { var wpisJ=document.createElement("section"); wpisJ.classList.add("blokJ"); var obrazJ=document.createElement("img"); obrazJ.src="Jolka.jpg"; wpisJ.innerText=document.getElementById("wpis").value; wpisJ.appendChild(obrazJ); blok_chatu.appendChild(wpisJ); wpisJ.scrollIntoView(); } function generuj() { const tablica = ["Świetnie!", "Kto gra główną rolę?", "Lubisz filmy Tego reżysera?", "Będę 10 minut wcześniej", "Może kupimy sobie popcorn?", "Ja wolę Colę", "Zaproszę jeszcze Grześka", "Tydzień temu też byłem w kinie na Diunie", "Ja funduję bilety"]; var indeks=Math.floor(Math.random()*9); var wpisK=document.createElement("section"); wpisK.classList.add("blokK"); var obrazK=document.createElement("img"); obrazK.src="Krzysiek.jpg"; wpisK.innerText=tablica[indeks]; wpisK.appendChild(obrazK); blok_chatu.appendChild(wpisK); wpisK.scrollIntoView(); } </script>
Zamówienia hurtowe
<script> var id_zamowienia=0; function braki(){ var liczba; var kolekcja=document.getElementsByClassName("ilosc"); for(var i=0; i< kolekcja.length; i++) { liczba=kolekcja[i].innerHTML; if (liczba==0) kolekcja[i].style.backgroundColor="red"; else if (liczba>=1 && liczba<=5) kolekcja[i].style.backgroundColor="yellow"; else kolekcja[i].style.backgroundColor="Honeydew"; } } function aktualizuj(a){ var nowa_ilosc=prompt("Podaj nową ilość"); if (a==1) document.getElementById("ilosc1").innerHTML=nowa_ilosc; if (a==2) document.getElementById("ilosc2").innerHTML=nowa_ilosc; if (a==3) document.getElementById("ilosc3").innerHTML=nowa_ilosc; if (a==4) document.getElementById("ilosc4").innerHTML=nowa_ilosc; braki(); } function zamow(a){ id_zamowienia++; if (a==1) alert("Zamówienie nr: "+ id_zamowienia +" Produkt: "+document.getElementById("nazwa1").innerHTML); if (a==2) alert("Zamówienie nr: "+ id_zamowienia +" Produkt: "+document.getElementById("nazwa2").innerHTML); if (a==3) alert("Zamówienie nr: "+ id_zamowienia +" Produkt: "+document.getElementById("nazwa3").innerHTML); if (a==4) alert("Zamówienie nr: "+ id_zamowienia +" Produkt: "+document.getElementById("nazwa4").innerHTML); } </script>
Pomocnik CSS
<script> function generuj(){ var wartosc=document.getElementById("wartosc").value; document.getElementById("kolor1").style.backgroundColor=("hsl("+wartosc+",50%,100%)"); document.getElementById("kolor2").style.backgroundColor=("hsl("+wartosc+",50%,80%)"); document.getElementById("kolor3").style.backgroundColor=("hsl("+wartosc+",50%,60%)"); document.getElementById("kolor4").style.backgroundColor=("hsl("+wartosc+",50%,40%)"); document.getElementById("kolor5").style.backgroundColor=("hsl("+wartosc+",50%,20%)"); } </script>