Javascript udostępnia nam gotowy obiekt Date() który umożliwia nam w łatwy sposób manipulowanie czasem oraz datami.
Aby wyświetlić na ekranie bierzącą datę jaka jest ustawiona w systemie klienta (a nie na serwerze!) musimy utworzyć nowy obiekt:
<script type="text/javascript"> czas = new Date(); //utworzenie nowego obiektu Date document.write(czas); //wypisanie na ekran naszego obiektu </script>
co w rezultacie wyświetli nam ciąg znaków:
Nasz obiekt posiada pewne metody za pomocą których możemy przejąć większą kontrolę nad sposobem wyświetlania aktualnej daty.
Podstawowe metody za pomocą których możemy w łatwy sposób formatować wygląd daty (najczęściej używane):
| getDate() | - zwraca dzień miesiąca (wartość z przedziału 1 - 31) |
| getDay() | - zwraca dzień tygodnia (0 dla niedzieli, 1 dla poniedziałku, 2 dla wtorku itd) |
| getYear() | - zwraca liczbę reprezentującą rok (dla lat 1900 - 1999 jest to 2-cyfrowa liczba np. 99, a dla puźniejszych jest to liczba 4-cyfrowa np. 2002) |
| getFullYear() | - zwraca pełną liczbę reprezentującą rok (np. 1999 lub 2000) |
| getHours() | - zwraca aktualną godzinę (wartość z przedziału 0 - 23) |
| getMillisecond() | - zwraca milisekundy (wartość z przedziału 0 - 999) |
| getMinutes() | - zwraca minuty (wartość z przedziału 0 - 59) |
| getMonth() | - zwraca aktualny miesiąc (0 - styczeń, 1 - luty itp.) |
| getSeconds() | - zwraca aktualną liczbę sekund (wartość z przedziału 0 - 59) |
| getTime() | - zwraca aktualny czas jako liczbę reprezentującą liczbę sekund która upłyneła od godziny 00:00 1 stycznia 1970 roku |
Wszystkie dostępne metody zobaczysz tutaj.
Przykładowe wyświetlenie godziny może mieć postać:
var czas = new Date; document.write(czas.getHours()) //lub document.write((new Date).getHours());
Skorzystajmy więc z powyższych metod aby nieco poprawić wygląd naszej daty:
var czas = new Date;
document.write("Jest teraz czas: "+czas.getHours()+":"+czas.getMinutes()+":"+czas.getSeconds()+"<br />");
document.write("Dnia: "+czas.getDate()+"."+(czas.getMonth()+1)+"."+czas.getFullYear());
Efekt powyższego skryptu możesz zobaczyć poniżej:
Powyższy skrypt wyświetla nam naszą datę w nieco bardziej dostępny sposób niż bez użycia metod. Do metody getMonth() dodaliśmy 1, ponieważ Javascript numeruje miesiące od 0.
Wszystko wygląda już w miarę dobrze. Jednak wciąż możemy poprawić pewne szczegóły. Wartości reprezentujące dany czas - np. minuty, sekundy lub miesiące są przedstawiane jako jednocyfrowe liczby jeżeli ich wartość jest mniejsza od 10. W normalnych ^^ zegarkach stosuje się zapis dwucyfrowy. Wniosek jest bardzo prosty - naszemu zapisowi brakuje zer wiodących.
Wystarczy przerobić nasz skrypt aby poprawić tą niedogodność:
var czas = new Date;
document.write("Jest teraz czas: ");
if (czas.getHours()<10) document.write("0");
document.write(czas.getHours()+":");
if (czas.getMinutes()<10) document.write("0");
document.write(czas.getMinutes()+":");
if (czas.getSeconds()<10) document.write("0");
document.write(czas.getSeconds());
document.write("<br />Dnia: ");
if (czas.getDate()<10) document.write("0");
document.write(czas.getDate()+".");
if ((czas.getMonth()+1)<10) document.write("0");
document.write((czas.getMonth()+1)+"."+czas.getFullYear());
Przed wypisaniem każdej liczby sprawdzamy czy jej wartość jest mniejsza od 10. Jeżeli tak jest, wówczas dopisujemy do niej 0.
Nie dokonujemy sprawdzenia dla metody getFullYear(), ponieważ zwraca ona wartość 4 cyfrową.
Powyższy kod można oczywiście znacząco zmniejszyć. Wystarczy dodać odpowiednią funkcję której zadaniem będzie odpowiednie wstawianie zer wiodących:
var czas = new Date;
function zero(liczba) {
return liczba=(liczba < 10)? "0"+liczba : liczba;
}
document.write("Jest teraz czas: ");
document.write(zero(czas.getHours())+":");
document.write(zero(czas.getMinutes())+":");
document.write(zero(czas.getSeconds()));
document.write("<br />Dnia: ");
document.write(zero(czas.getDate())+".");
document.write(zero((czas.getMonth()+1))+"."+czas.getFullYear());
Funkcja zero() wymaga podania w parametrze liczby i gdy ta jest mniejsza od 10 wówczas dopisuje do niej 0.
Jak już wiemy aby wypisać dzień tygodnia musimy skorzystać z metody getDay().
var czas = new Date();
document.write("Dzisiaj jest dzień tygodnia: "+czas.getDay()); //pamiętajmy że dni tygodnia liczone są od 0
Numer tygodni w postaci liczby nie wygląda zbyt elegancko. Ale i to się da naprawić - wystarczy zastosować odpowiednio przygotowaną tablicę. Wystarczy teraz pobrać wartość tablicy podając w indexie numer dnia:
var czas = new Date();
var dni = new Array("Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota", "Niedziela");
document.write("Dzisiaj jest dzień tygodnia: " + dni[czas.getDay()]);
Wiedząc już jak się wypisuje aktualną datę oraz aktualny dzień tygodnia możemy napisać skrypt, który będzie to robił dynamicznie. Najłatwiej umieścić taki zapis w polu tekstowym umieszczonym w formularzu. Stwórzmy więc przykładowy formularz:
<form id="Formularz_zegarka"> <fieldset> <input type="text" name="f_czas" size="8" /><br /> <input type="text" name="f_data" size="23" /> </fieldset> </form>
Przejdzmy do skryptu Javascript odpowiedzialnego za wyświetlanie naszego czasu:
<script type="text/javascript">
function zero(element) { //1
if (element < 10) return element = "0" + element;
return element;
}
function pokaz_czas() {
var czas = new Date();
var dni = new Array("Niedziela", "Poniedziałek", "Wtorek", "¦roda", "Czwartek", "Piątek", "Sobota");
var data = zero(czas.getDate())+"."+zero((czas.getMonth()+1))+"."+czas.getFullYear()+" - "+dni[czas.getDay()];
var czas_na_zegarku = zero(czas.getHours())+":"+zero(czas.getMinutes())+":"+zero(czas.getSeconds());
var forma = document.getElementById('Formularz_zegarka');
forma.Formularz_zegarka.f_data.value = data;
forma.Formularz_zegarka.f_czas.value = czas_na_zegarku;
setTimeout("pokaz_czas()",1000)
}
pokaz_czas();
</script>
Cała sztuczka polega na cyklicznym wywoływaniu funkcji, która pobiera datę, a następnie wypisuje ją do odpowiednich pól. Cykliczne wywoływanie co 1s wykonujemy przy pomocy funkcji setTimeout('nazwa_funkcji()',czas_w_ms).
Poznane powyżej metody można wykorzystać do wypisywania odpowiedniej treści w zależności od aktualnego czasu. Wystarczy sprawdzić aktualny znacznik czasu (dni, godziny, minuty itp.) i w zależności od jego wartości wypisywać odpowiednią treść. Poniższy skrypt przedstawia przykładowe zastosowanie tej metody:
var czas = new Date();
var godzina = czas.getHours();
if (godzina > 0 && godzina < 6) document.write("Ojej - to był jednak tylko sen?...");
if (godzina >= 6 && godzina < 9) document.write("Zaczyna się kolejny dzień");
if (godzina >= 9 && godzina < 19) document.write("Kolejny piękny dzionek");
if (godzina >= 19 && godzina < 23) document.write("No to mamy nocke. Witamy w świecie snu ;)");
Tworzymy nowy obiekt typu Date o nazwie czas. Wartość otrzymaną z metody getHours() przypisujemy do zmiennej godzina. Wystarczy teraz sprawdzić którą mamy godzinę i wypisać stosowny komunikat.
W powyższych skryptach za pomocą odpowiednich metod pobieraliśmy aktualną datę i czas. Javascript udostępnie nam także zestaw metod, za pomocą których możemy ustawiać czas i datę. Ustawienie takie nie wpływa w żaden sposób na systemowy zegar i kalendarz - działa ono tylko w odrębie skryptu Javascript. Aby ustawić datę i czas możemy skorzystać z dwóch sposobów.
Pierwszym z nich polega na podaniu w nawiasach obiektu Date() poszczególnych składowych czasu. Kolejność wprowadzanych danych to:
rok, miesiąc, dzień, godzina , minuta, sekunda, milisekunda:
var time = new Date(2008,4,12,15,24,18);
ustawi nam datę obiektu dzisiaj na:
W powyższym przykładzie pomineliśmy parametr oznaczający milisekundy - nie chcemy być dokładni aż do przesady ^^.
Ustawiony znacznik możemy oczywiście odczytać:
var time = new Date(2008,4,12,15,24,18); document.write(time.getYear()+"." +time.getMonth()+ "." +time.getDate()+ " - " +time.getHours()+ ":" +time.getMinutes()+ ":" time.getSeconds());
Drugim sposobem ustawiania czasu i daty jest zastosowanie odpowiednich metod. Poniżej przedstawiam te metody:
setYear() - ustawia dwie ostatnie cyfry roku,
setMonth() - ustawia miesiąc,
setDate() - ustawia dzień miesiąca,
setHours() - ustawia godzinę,
setMinutes() - ustawia minuty,
setSeconds() - ustawia sekundy,
setMilliseconds() - ustawia milisekundy.
Każda metoda ustawia tylko jeden element obiektu Date. Poza tymi metodami istnieją jeszcze dodatkowe metody do ustawiania czasu UTC.
Możemy np ustawić taki sam czas jak w przykładzie powyżej korzystając z poszczególnych metod::
var time = new Date(); time.setYear(2008); time.setMonth(4); time.setDate(12); time.setHours(15); time.setMinutes(24); time.setSeconds(18); document.write(time.getYear() + "." + time.getMonth() + "." + time.getDate() + " - " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
Efekt tego skryptu jest identyczny jak efekt skryptu z metody 1 - różnica leży w długości skryptu.
Spróbujmy napisać skrypt, który będzie odliczał dni do jakiegoś wydarzenia.
Na początku przeanalizujmy problem. Aby zrobić takie odliczanie, musimy obliczyć różnicę między datą z przyszłości a datą teraźniejszą. Pobieramy więc oba czasy (w ms), a następnie odejmujemy od siebie. Uzyskany wynik otrzymujemy w ms. Nas jednak interesuje liczba dni. Dzielimy więc wynik przez liczbę ms w dniu (czyli 24*60*60*1000). Dzięki temu uzyskujemy liczbę oznaczającą liczbę dni+resztę. Aby wydobyć tą resztę, musimy od wyniku odjąć zaokrąglony wynik. Mając resztę możemy w podobny sposób obliczyć liczbę godzin, minut i sekund - wciąż posługując się podobną techniką.
Rysunek poniżej przedstawia algorytm naszego działania:
<form class="Formularz">
<fieldset>
<input type="text" id="odliczaj" style="width:500px" value="" />
</fieldset>
</form>
<script type="text/javascript">
function pokaz_odliczanie() {
var Rok = (new Date).getFullYear(); //pobieramy teraźniejszy rok
var Miesiac = 10;
var Dzien = 29;
var dzis = new Date(); //pobieramy dzisiejszą datę
var BardzoWaznaData = new Date(Rok,Miesiac-1,Dzien,9,30); //ustawiamy ważną datę do której będziemy odliczać (urodziłem się o 9:30 ^^)
var ms_w_dniu = 24 * 60 * 60 * 1000; //1 dzien w milisekundach - to w nich jest przecież zwracany czas metodą getTime którą wykorzystujemy poniżej
var roznica = (BardzoWaznaData.getTime() - dzis.getTime()); //obliczamy różnicę w datach - zwrazana liczba reprezentuje ilość milisekund
//zwracaną liczbę zamieniamy na ilość dni + po przecinku reszta czyli h, m i s. Dzieląc na dni, otrzymujemy godziny w postaci x/24 itp.
var e_zostaloDni = roznica / ms_w_dniu;
var zostaloDni = Math.floor(e_zostaloDni); //chcemy liczbę dni - zaokrąglamy wynik
var e_zostaloGodzin = (e_zostaloDni - zostaloDni)*24;
var zostaloGodzin = Math.floor(e_zostaloGodzin);
var e_zostaloMinut = ((e_zostaloGodzin - zostaloGodzin)*60);
var zostaloMinut = Math.floor(e_zostaloMinut);
var e_zostaloSekund = Math.floor((e_zostaloMinut - zostaloMinut)*60);
var zostaloSekund = Math.floor(e_zostaloSekund);
var tekst = 'Do moich kolejnych urodzin pozostało: '
+zostaloDni+' dni, '
+zostaloGodzin+ ' godzin, '
+zostaloMinut+ ' minut i '
+zero(zostaloSekund)+' sekund';
document.getElementById('odliczaj').value = tekst;
setTimeout("pokaz_odliczanie()",1000)
}
pokaz_odliczanie()
</script>