Odliczanie czasu w dół PHP Countdown

W tym post-cie przedstawię użyteczny mechanizm odliczania czasu w dół.
Skrypt, który pokaże można osadzić w kodzie: HTML, PHP lub ASP.NET.
Skorzystam i omówię przeznaczoną do tego celu bibliotekę bazującą na JQuery o nazwie:
jQuery Countdown.

Zaczynamy od razu od kodu i jego omówienia.

Etap I:
Importujemy biblioteki jQuery i jQuery.countdown.js oraz importujemy style.

(Uwaga - Możesz też pobrać wszystkie wymagane skrypty i zamiast internetowej lokalizacji skryptów [https://keith-wood.name/...] - wprowadź Swoją lokalizację skryptów).
Często programiści w tym Ja, gdy tworzą projekty programistyczne pobierają wszystkie skrypty na Swój komputer (lokalnie), aby umieścić je w Swoim projekcie programistycznym, a następnie w projekcie na serwerze produkcyjnym do komercyjnego użytku.
Dlaczego? - a no dlatego, bo np. za 5 lat projekt z którego pobraliśmy skrypty może już nie istnieć lub np. serwer ze skryptami może chwilowo nie odpowiadać, mogą być prace konserwacyjne, a jak masz wszystkie skrypty u Siebie, to Ci nic nie grozi, Twój projekt programistyczny zawsze będzie funkcjonował.
Wady - w zasadzie tylko jedna, jak stworzysz projekt oddany do użytku komercyjnego z pobranymi skryptami, a w między czasie wyjdzie nowa wersja skryptów, komercyjna strona internetowa (komercyjny serwis internetowy) będzie korzystał ze starych wersji skryptów.
W tym post-cie skorzystamy z internetowej lokalizacji skryptów.

W części <HEAD>: 
<style type="text/css">
@import "https://keith-wood.name/css/jquery.countdown.css";
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 

Etap II:

W części <BODY> - dla języka polskiego: 
<!-- wersja polska -->
<!-- pamiętaj, że w wersji polskiej musisz dodać dwa skrytpy jednocześnie z zachowaniem kolejności: jquery.countdown.js i jquery.countdown-pl.js -->
<script type="text/javascript" src="https://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript" src="https://keith-wood.name/js/jquery.countdown-pl.js"></script>
<script type="text/javascript">
    $(function () {
        var austDay = new Date();
        austDay = new Date(2014, 6-1 , 12);
        $('#defaultCountdown').countdown({ until: austDay });
        $('#year').text(austDay.getFullYear());
    });
</script>
<div id="defaultCountdown"></div>
 

W części <BODY> - dla języka angielskiego: 
<!-- wersja angielska -->
<script type="text/javascript" src="https://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript">
    $(function () {
        var austDay = new Date();
        austDay = new Date(2014, 6-1 , 12);
        $('#defaultCountdown').countdown({ until: austDay });
        $('#year').text(austDay.getFullYear());
    });
</script>
<div id="defaultCountdown"></div>
 

Omówienie - ETAPU II:

$(function () {
  var austDay = new Date();
  austDay = new Date(2014, 6-1 , 12);
  $('#defaultCountdown').countdown({ until: austDay });
  $('#year').text(austDay.getFullYear());
});

Powyższy kod uruchamia skrypt jQuery przy użyciu: $(function () { .. });
Następnie tworzy zmienną austDay (ustawia na datę rozpoczęcia mistrzostw świata w piłce nożnej w Brazyli);
Następnie w kolejnej linii jest uruchamiany skrypt opisywanej biblioteki: jQuery Countdown w technice uruchamiania jQuery;
Ostatnia linia skryptu to odwołanie się do zmiennej bibliotek: jQuery Countdown, w celu ustawienia formatu daty.

Poza skryptem jest także dołączona warstwa, <div id="defaultCountdown"></div> która wstawia obiekt "licznika w dół" na stronę WWW.



Poniżej dwa przykłady działania powyższych kodów dla języka polskiego i języka angielskiego, sama czysta strona HTML.
Abyś błyskawicznie zrozumiał kod i od razu mógł umieszczać go u Siebie!
Uwaga - nie można na jednej stronie mieszać języków, stąd dwa linki.
DATA ODLICZANIA USTAWIONA JEST NA DZIEŃ ROZPOCZĘCIA MISTRZOSTW ŚWIATA W PIŁCE NOŻNEJ W BRAZYLI

countdown PL
countdown EN


Odwołanie do twórców skryptu (można tam między innymi przeczytać o różnych stylach wyświetlacza, jest także dołączona dokumentacja).
Patrz tutaj (język ang.).


I to by było na tyle miłej zabawy, :)


Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej