Powrót

Przetwarzanie informacji daty i czasu w Javascript

1. Klasa i obiekt Date

Obiekt Date zawiera szereg metod, które pozwalają na wyświetlenie informacji na temat czasu i daty. Data i czas są pobierane z lokalnego systemu komputera użytkownika.

a. Przetwarzanie informacji czasu - wyświetlenie zegara

            


            //w strukturze html tworzymy przykładowy znacznik div,
            // w którym wyświetlimy informację zegara, 
               

                <div id='zegar' ></div>
              

                <script>

                //tworzymy funkcję info wyświetlającą zegar

                function info(){
            
                    var czas = new Date(); //tworzymy nowy obiekt predefiniowanej klasy Date
        
                    var g = czas.getHours(); //metoda getHours - zwraca informację o godzinie
                    if(g<0){g="0"+g} //dodanie wiodącego 0 (np. 1 -> 01)

                    var m = czas.getMinutes(); // metoda getMinutes - zwraca informację o minutach
                    if(m<10){m="0"+m}

                    var s = czas.getSeconds(); // metoda getSeconds - zwraca informację o sekundach
                    if(s<10){s="0"+s}
        
                    //utworzenie uchytu do tagu div
                    var zegar = document.querySelector("#zegar");

                    //wczytanie do znacznika div naszego zegara
                    zegar.innerHTML = g+":"+m+":"+s;
        

                    //i wisieńka na torcie - czy wiecie jakie kolory ma czas?
                    
                    //toString() - metoda ta zamienia typ number na string
                    g.toString();
                    m.toString();
                    s.toString();
                    
                    //na podstawie danych czasu tworzymy kod koloru RGB
                    var kolor = "#"+g+m+s;

                    //zmiana koloru tła naszej strony - no i mamy kolory czasu :)
                    document.body.style.backgroundColor = kolor;
                    
                    //za pomocą funkcji setTimeout() wygenerujemy zmianę licznika sekund
                    setTimeout("info()", 1000);
        
                    }//koniec funkcji info
        
        
                    info();
               

               
                </script>

b. Przetwarzanie informacji daty

                
                //Przetwarzanie informacji daty

                //w strukturze html tworzymy przykładowy znacznik div, 
                //w którym wyświetlimy informację o bieżącym dniu tygodnia, 
                   
                <div id='dzien' ></div>
    
                <script>

                function info2(){

                    var t = new Date(); //tworzymy nowy obiekt predefiniowanej klasy Date
                    var dz = t.getDay();  //metoda getDay() zwraca liczby 0 do 6, gdzie 0 oznacza Niedzielę, 
                    //a kolejne liczby to kolejne dni tygodnia 
    
                    //Do przetworzenia tej informacji użyjemy instrukcji switch
                    switch(dz){
                        case 0:
                            dz = "niedziela";
                        break;
                        case 1:
                            dz="poniedziałek";
                        break;
                        case 2:
                            dz="wtorek";
                        break;
                        case 3:
                            dz ="środa";
                        break;
                        case 4:
                            dz = "czwartek";
                        break;
                        case 5:
                            dz = "piątek";
                        break;
                        case 6:
                            dz="sobota";
                        break;
                    }
                    
                    //tworzymy uchwyt do naszego znacznika div
                    var dzien = document.querySelector("#dzien");

                    //wczytujemy informację o dzisiejszym dniu tygodnia
                    dzien.innerHTML = "Dzisiaj jest "+dz;
    
                }//koniec info2
    
                info2();

                </script>

c. Najczęściej używane metody klasy/obiektu Date

JavaScript udostępnia wiele metod związanych z obiektem Date(). My korzystamy z GMT (Uniwersalny Czas Greenwich). 

                
        <script>

                var data = new Date();
                   
                document.write('Date(): '+data);
                document.write('Metoda getDate: '+data.getDate());
                document.write('Metoda getDay: '+data.getDay());
                document.write('Metoda getFullYear: '+data.getFullYear());
                document.write('Metoda getHours: '+data.getHours());
                document.write('Metoda getMilliseconds: '+data.getMilliseconds());
                document.write('Metoda getMinutes: '+data.getMinutes());
                document.write('Metoda getMonth: '+data.getMonth());
                document.write('Metoda getSeconds: '+data.getSeconds());
                document.write('Metoda getTime: '+data.getTime());

        /*
            getDate()	dzień miesiąca (wartość z przedziału 1 - 31)

            getDay()	dzień tygodnia (0 dla niedzieli, 1 dla poniedziałku, 2 dla wtorku itd.)

            getYear()	liczba reprezentująca rok (dla zakresu dat 1900 - 1999 jest to 2-cyfrowa liczba,
             a dla późniejszych jest to liczba 4-cyfrowa)

            getFullYear()	pełna liczba reprezentująca rok

            getHours()	zwraca aktualną godzinę (z przedziału 0 - 23)

            getMillisecond()	zwraca milisekundy (z przedziału 0 - 999)

            getMinutes()	zwraca minuty (z przedziału 0 - 59)

            getMonth()	zwraca aktualny miesiąc (0 - styczeń, 1 - luty itd.)

            getSeconds()	zwraca aktualną liczbę sekund (z przedziału 0 - 59)

            getTime()	zwraca aktualny czas jako liczbę reprezentującą liczbę milisekund
             która upłynęła od godziny 00:00 1 stycznia 1970 roku


            */
            </script>