Jak na automatický reload stránky se zobrazením odpočtu v PHP a JavaScript

Nedávno jsem narazil na problém, kdy jsem potřeboval automaticky načítat obsah stránky velice jednoduchým skriptem se zobrazením času odpočtu. Po hledání jsem našel kód, který ve spojení s php správně funguje a rozhodl jsem se, že jej zde zveřejním, abych ušetřil práci všem, kteří by podobný postup hledali v budoucnu.

Požadavek byl přitom jednoduchý. Nechtěl jsem využívat žádné externí knihovny a velké kusy kódu. Jednoduše jsem chtěl vytvořit JavaScriptový odpočet, který bude odčítat zvolený čas, a navíc bude do aktuální odpočet vkládat do specifického prvku, který bude na stránce zobrazen tak, aby na stránce bylo jasně vidět za jak dlouho se stránka znovu načte. Nejprve jsem našel příklad takto vytvořeného souboru na portálu w3schools.com přesně takový skript. Ten ze zvoleného data v americkém formátu začne odpočítávat čas, který ještě k tomu převádí na počet dní hodin minut a vteřin. Navíc tento údaj předá do specifického souboru a na stránce tak ono počítadlo lze jednoduše zobrazit.

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Ukázkový a velmi jednoduchý skript už tedy máme a teď jak jej spojit s php a posouvat cílový čas s přesností na vteřiny, aniž bychom se museli prokousávat americkým formátem času a provádět na něm výpočty? Řešení je překvapivě jednoduché. Stačí když si čas převedeme do unix formátu. Ten totiž počítá počet vteřin od okamžiku koordinovaného světového času 00:00:00 1. ledna 1970. Vezmeme tedy čas, který chceme, aby stránka odčítala ve vteřinách. To je v našem případě 20 vteřin. Těchto 20 vteřin připočteme k aktuálnímu času a tento nový čas převedeme pomocí GMdate funkce na formát, kterému skript rozumí. Pak stačí zavolat onen JavaScript z příkladu a na konci jej nahradit příkazem na automatický reload stránky location.reload();. Kdekoliv na stránce také můžeme využít jakéhokoliv html prvku id=„casovac“ a javascript prvek doplní o aktuální hodnotu počítadla. Krása JavaScriptu je navíc taková, že můžete kód vkládat kdekoliv na stránce. I když je správná definice přímo v hlavičce, funguje kdekoliv v dokumentu, a tak pokud to není technicky možné, bude tento malý kus kódu dělat svou práci a načítat novou stránku i bez nutností zasahovat do hlaviček.

$reload = '20';
$ted = date("Y-m-d H:i:s");
$ted_unix = strtotime($ted);
$unix_new = $ted_unix + $reload + 7200;
$datum_cil = gmdate("M d, Y H:i:s", $unix_new);

echo '<script>
// Set the date were counting down to
var countDownDate = new Date("'.$datum_cil.'").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

 // Get todays date and time
 var now = new Date().getTime();

 // Find the distance between now and the count down date
 var distance = countDownDate - now;

 // Time calculations for days, hours, minutes and seconds
 var days = Math.floor(distance / (1000 * 60 * 60 * 24));
 var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 var seconds = Math.floor((distance % (1000 * 60)) / 1000);

 // Display the result in the element with id="demo"
 document.getElementById("casovac").innerHTML =  seconds + "s ";

 // If the count down is finished, write some text
 if (distance < 0) {
   clearInterval(x);
   document.getElementById("casovac").innerHTML = "RELOAD";
   location.reload();
 }
}, 1000);
</script>';



 echo ' Reload stránky za <b id="casovac"></b>';

Doufám, že se bude tento malý kus kódu líbit a minimálně ušetří nějaký čas hledáním. Schválně dejte do komentářů vědět, jestli jste našli optimálnější způsob, který by fungoval tak jednoduše, a přitom spolehlivě bez externích knihoven, a přitom se zobrazením údajů samotného počítadla.

Mohlo by vás zajímat

Puvodní sktipt ze kterého jsem vycházel z portálu w3schools.com

Unix time popis na Wikipedii

Skript na automatické restartování počítače s logováním