Script Countdown timer

Curs Php-mysql

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:

• countdown_timer.php - contine codul PHP pentru stabilirea datelor si a timpului ramas pana la data precizata.
• countdown_timer.js - codul JavaScript, Ajax ce preia datele de la scriptul PHP si afiseaza in pagina trecerea timpului ramas.

- Dupa expirarea timpului poate fi executata o functie JavaScript configurata de dv.
- Mai jos gasiti codul pentru fiecare.

In pachetul ce poate fi descarcat de la link-ul Download (dreapta-sus) gasiti acest script impreuna cu un model de test si explicatiile necesare.

Iata cateva exemple cu acest script:
- In continuare: codul pt. fiecare fisier si instructiuni de utilizare.

Cod - countdown_timer.php

<?php
// Script Countdown Timer de la https://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);
?>

Cod - countdown_timer.js

// JS script pt. Countdown Timer de la https://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');

Mod de instalare

1. Creati pe server fisierele: "countdown_timer.php" si "countdown_timer.js" (avand in fiecare codul lor de mai sus), in acelasi director in care aveti pagina unde doriti sa includeti scriptul.

2. In acea pagina, in locul unde doriti sa apara afisata trecerea timpului ramas, adaugati urmatorul cod:
3. Pentru grafica timpului afisat, adaugati in sectiunea <head></head> urmatorul cod CSS:

Setari pt. diferite date de calculare a timpului limita

Asa cum este definit scriptul initial, calculeaza si afiseaza timpul ramas pana la sfarsitul zilei curente. Poate fi usor setat pentru a calcula si afisa durata si pana la alte date de timp, precum: timpul ramas pana la sfarsitul anului curent, a lunii, saptamanii, sau orei curente, ori chiar timpul ramas pana la o data exacta, specificata de dv.
Toate aceste setari se fac prin modificarea catorva date in fisierul "countdown_timer.php", unde este scris "/*** Aici modificati ***/".
In continuare sunt prezentate cateva din aceste setari, din care sa intelegeti cum puteti modifica singuri.

1. Daca doriti sa afiseze timpul ramas pana la sfarsitul zilei curente, puteti lasa cum e fara sa modificati vreo valoare.

2. Pentru obtinerea timpului ramas pana la sfarsitul anului, modificati valoarea variabilei $aray['an'], in loc de "date('Y')" scrieti 'an'. Restul lasati cum e. Matricea $aray sa aiba valoarea elementelor astfel:
3. Pentru obtinerea timpului ramas pana la sfarsitul lunii, modificati doar valoarea variabilei $aray['luna'], in loc de "date('m')" scrieti 'luna'. Restul lasati nemodificat. Matricea $aray sa aiba valoarea elementelor astfel:
4. Pentru a obtine timpului ramas pana la sfarsitul saptamanii curente, modificati doar valoarea variabilei $aray['zi'], in loc de "date('d')+1" scrieti 'week'. Restul lasati cum e.

5. Pentru timpul ramas pana la sfarsitul orei curente, modificati doar valoarea variabilei $aray['ora'], in loc de "0" scrieti 'ora'. Restul lasati cum e.

6. Pentru a obtine timpului ramas pana la sfarsitul minutului curent, modificati valoarea variabilei $aray['min'], in loc de "0" scrieti 'minut'. Restul lasati cum e.

7. Daca doriti sa afisati valoarea pana la o anumita data fixa, modificati valorile lui $aray la elementele ce alcatuesc acea data. Iata un exemplu:

- Timpul ramas pana la 15 Octombrie, ora 8 (dimineata), anul 2015:
- Se modifica valorile la variabilele: $aray['an'], $aray['luna'], $aray['zi'] si $aray['ora']; comform numarului anului (2015), lunii (10), zilei (15) si orei (8). Astfel, matricea $aray o sa aiba valoarea elementelor astfel:
- Scriptul este gratuit, il puteti modifica si folosi dupa cum doriti. Fiind gratuit, nu se acorda suport, dar daca aveti sesizari, opinii sau intrebari legate de el, va rog sa postati pe Forum, la sectiunile PHP - JavaScript.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.