Countdown timer este un script ce calculeaza si afiseaza in pagina web timpul ramas (expirarea lui) pana la o anumita data specificata de dv., cum ar fi: timpul pana la sfarsitul orei curente, a zilei, saptamanii, lunii sau a anului, ori timpul pana la o anumita data fixata de dv.
Scriptul e facut cu PHP, JavaScript si Ajax, poate fi inclus atat in pagini .php cat si .html, dar pe serverul unde este gazduit site-ul trebuie sa ruleze PHP.
Este determinat si afisat timpul dupa data serverului, pentru zona geografica a Romaniei, astfel, calcularea timpului ramas nu depinde de calculatorul utilizatorului.
A fost testat cu succes pe navigatoarele web: Mozila Firefox, Internet Explorer (7 si 8) si Opera.
Pentru cei interesati de invatarea PHP si Ajax, gasiti in documentatia din cod explicatii ajutatoare.
Acest script e format din 2 fisiere:
<?php
// Script Countdown Timer de la http://www.marplo.net
/*** Aici modificati ***/
// Daca doriti sa fie afisat timpul ramas pana sfarsitul zilei (ora 24), nu e nevoie sa modificati
// Pentru detalii si exemple de modificare, vedeti si instructiunile din "Citeste.html"
// Defineste datele ce trebuie adaugate in $aray (vor fi atribuite la mktime() din functie)
$aray['an'] = date('Y'); // Pentru timpul pana la sfarsit de an, inlocuiti "date('Y')" cu 'an'
$aray['luna'] = date('m'); // Pentru timpul pana la sfarsit de luna, inlocuiti "date('m')" cu 'luna'
$aray['zi'] = date('d')+1; // Pentru timpul pana la sfarsit de saptamana, inlocuiti "date('d')+1" cu 'week'
$aray['ora'] = 0; // Pentru timpul pana la sfarsit de ora, inlocuiti 0 cu 'ora'
$aray['min'] = 0; // Pentru timpul pana la sfarsit de minut, inlocuiti 0 cu 'minut'
$aray['sec'] = 0;
/*** De aici in continuare nu modificati ***/
// Functia preia matricea cu data specificata ca limita
// In functie de datele zilei curente, calculeaza cate secunde "mktime()" sunt pana la data limita
// Transforma timpul rezultat in ani, luni, zile, ore, minute si secunde
function timp_ramas($aray) {
date_default_timezone_set('Europe/Bucharest'); // Seteaza zona Romania pt. definirea datei
// Defineste datele necesare pentru cazul cand la 'an' e specificat "an" (pt. sfarsit de an)
if($aray['an']==='an') {
$aray['an'] = date('Y') + 1;
$aray['luna'] = 1;
$aray['zi'] = 1;
$aray['ora'] = 0;
}
// Stabileste ziua pentru cazul cand la 'luna' e specificat "luna" (pt. sfarsit de luna)
if($aray['luna']==='luna') {
$aray['luna'] = date('m') + 1;
$aray['zi'] = 1;
}
// Stabileste ziua pentru cazul cand la 'zi' e specificat "week" (pt. sfarsit de saptamana)
if($aray['zi']==='week') $aray['zi'] = date('d') + 8 - date('N');
// Stabileste datele pentru cazul cand la 'ora' e specificat "ora" (pt. sfarsit de ora)
if($aray['ora']==='ora') {
$aray['zi'] = date('d');
$aray['ora'] = date('H') + 1;
}
// Stabileste datele pentru cazul cand la 'min' e specificat "minut" (pt. sfarsit de minut)
if($aray['min']==='minut') {
$aray['zi'] = date('d');
$aray['ora'] = date('H');
$aray['min'] = date('i') + 1;
}
// Preia nr. secunde pana la data stabilita [ mktime(ora, minut, secunda, luna, zi, an) ]
$secunde = mktime($aray['ora'], $aray['min'], $aray['sec'], $aray['luna'], $aray['zi'], $aray['an']) - time();
// Adauga intr-un Array cate zile, ore, minute si secunde sunt ramase (1 zi = 86400 s [60*60*24])
$re['zile'] = floor($secunde/86400);
$re['ore'] = floor(($secunde%86400)/3600);
$re['min'] = floor((($secunde%86400) - $re['ore']*3600)/60);
$re['sec'] = $secunde%60;
return implode(':', $re);
}
// Daca sunt primite datele corecte prin $_POST (de la Ajax), returneaza rezultatul functiei
if(isset($_POST['t']) && $_POST['t']=='mp') echo timp_ramas($aray);
?>
// JS script pt. Countdown Timer de la http://www.marplo.net
var php = 'countdown_timer.php'; // Calea si numele fisierului cu scriptul PHP
var tag_re = 'timp_r'; // Id-ul tag-ului HTML in care va fi afisat timpul ramas
// Functie ce e executata cand timpul a expirat
function time_0() {
// Aici se poate adauga cod care sa fie executa (precum un mesaj, sau apelarea unui script PHP ori redirect, etc.)
alert('Timpul a expirat'); // Afiseaza o fereastra alert
}
// Functia ce preia datele cu timpul ramas si le afiseaza in pagina
function countdown_timer(ani, zile, ore, min, sec) {
// Defineste o variabila prin care se verifica terminarea perioadei si decide auto-apelarea functiei
// Daca zile, ore, min si secunde sunt toate 0 incheie auto-apelarea functiei
if(zile==0 && ore==0 && min==0 && sec==0) var go = 0;
else var go = 1;
var anul = (new Date()).getFullYear(); // Preia anul curent (pt. a stabili nr. zile 365 sau 366)
var z_an = (anul%4)==0 ? 366 : 365; // Stabileste nr. zile: pt an bisect 366, altfel 365
// Defineste nr. de ani initial ramasi
if(ani=='an' && (zile/z_an)>=1) ani = parseInt(zile/z_an);
// Defineste datele ce trebuie afisate
if(ani>=1) {
var sh_zile = ani+'<sub>ani</sub> : '+ (zile%z_an)+'<sub>zile</sub> : ';
}
else {
var sh_zile = (zile>0) ? zile+'<sub>zile</sub> : ' : '';
}
var sh_ore = (zile==0 && ore==0) ? '' : ore+'<sub>ore</sub> : ';
var sh_min = (zile==0 && ore==0 && min==0) ? '' : min+'<sub>min</sub> : ';
var sh_sec = sec+'<sub>sec</sub>';
// Aranjaza si afiseaza elementele HTML in eticheta <div>
var sh_timp = '<b style="font-size:9px;">Timp ramas</b><br ><div id="show_tr">'+sh_zile+sh_ore+sh_min+sh_sec+'</div>';
document.getElementById(tag_re).innerHTML = sh_timp;
// Face scaderea timpului
sec--;
if (sec<0) {
if(zile>0 || ore || min>0) {
sec = 59;
min--;
}
else sec = 0;
}
if (min<0) {
if(zile>0 || ore>0) {
min = 59;
ore--;
}
else min = 0;
}
if (ore<0) {
if(zile>0) {
ore = 23;
zile--;
}
else ore = 0;
}
if(zile<0) {
if(ani>=1) {
zile = z_an - 1;
ani--;
}
else zile = 0;
}
// Auto-executa functia countdown_timer() la fiecare secunda, daca go>0
if(go>0) {
// Stabileste parametri de apelare
var apelare = (ani=='an') ? "'"+ani+"', "+zile+", "+ore+", "+min+", "+sec : ani+", "+zile+", "+ore+", "+min+", "+sec;
setTimeout("countdown_timer("+apelare+")",1000);
}
else time_0(); // Apeleaza functia ce se executa cand timpul a expirat
}
// Functia care verifica si creaza obiectul XMLHttpRequest pt Ajax, in functie de browser
function get_XmlHttp() {
// Creaza variabila care va contine instanta la XMLHttpRequest, initial cu valoare nula
var xmlHttp = null;
if(window.XMLHttpRequest) { // Daca browser-ul e Forefox, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // Daca browser-ul este Internet Explorer
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// Functia care trimite datele la un fisier PHP si returneaza raspunsul
function ajax_post(php, datele) {
var cerere_http = get_XmlHttp(); // Apeleaza functia pt. crearea instantei la obiectul XMLHttpRequest
cerere_http.open("POST", php, true); // Creaza cererea
// Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
cerere_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
cerere_http.send(datele); // Efectueaza trimiterea cererii, impreuna cu valorile care trebuie transmise
// Verifica starea cererii
// Daca raspunsul e primit complet, preia datele primite
cerere_http.onreadystatechange = function() {
if (cerere_http.readyState == 4) {
// Preia datele primite si le imparte in elemente de Array
// In ordine, de la 0, acestea sunt: zile, ore, minute, secunde
var aray_re = cerere_http.responseText.split(':');
// Se apeleaza functia countdown_timer(), cu 'ani' la inceput. apoi elementele in ordine din aray_re
countdown_timer('an', aray_re[0], aray_re[1], aray_re[2], aray_re[3]);
}
}
}
// Se apeleaza functia ajax_post() cu datele pt. scriptul PHP
ajax_post(php, 't=mp');