Альтернатива странице Обновить PHP

Я работаю над изучением PHP, и я хотел сделать часы с некоторыми крипто-подобными изображениями, которые я сделал.

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы часы обновлялись каждую секунду, но без обновления страницы. Итак, мой вопрос, как бы вы предложили мне сделать это?

Прямо сейчас я использую обновление HTML-страницы, которое заставляет мои изображения мерцать при каждой перезагрузке.

Заранее спасибо за вашу помощь!

Код ниже:

<!--
    * By megabyteGhost
    * megabyteGhost.tumblr.com
-->


<html>
    <head>
        <meta http-equiv="refresh" content="0.5" >
    </head>

    <body bgcolor="black">
    <?php
        date_default_timezone_set('America/New_York');
        $hour = date(H); 
        $minutes = date(i);
        $seconds = date(s);

        echo '<img src="images/'.$hour.'.png">';
        echo '<img src="images/'.$minutes.'.png">';
        echo '<img src="images/'.$seconds.'.png">';
    ?>

    </body>
</html>
Источник

3 ответа

Решение

Вы можете (только) использовать Javascript:

(я добавил alt tag, потому что изображения явно не могут быть загружены здесь)

setInterval(function(){
  var date = new Date();
  
  var hr = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  
  //document.getElementById("hours").src = "images/" + hr + ".png";
  document.getElementById("hours").alt = hr;
  //document.getElementById("minutes").src = "images/" + min + ".png";
  document.getElementById("minutes").alt = min;
  //document.getElementById("seconds").src = "images/" + sec + ".png";
  document.getElementById("seconds").alt = sec;
},1000)
<span id="timer">
  <img src="" id="hours" alt="0">:
  <img src="" id="minutes" alt="0">:
  <img src="" id="seconds" alt="0">
</span>

Имейте в виду, что вы должны предварительно загрузить изображения!

JS:

//before starting the interval:
var preloadedImages = [];
for(var i=0;i<60;i++){
    preloadedImages[i] = new Image();
    preloadedImages[i].src = "images/"+i+".png";
}

Таким образом, браузер хранит их в памяти, поэтому у вас не будет мерцающего счетчика секунд при первой загрузке изображений.

[РЕДАКТИРОВАТЬ]: Кстати.... избежать этого:

$hour = date(H); 
$minutes = date(i);
$seconds = date(s);

должно быть так:

$hour = date("H"); 
$minutes = date("i");
$seconds = date("s");

иначе они будут проверяться как постоянные переменные и распечатывать уведомление, которое будет спамить ваши логи, если у вас достаточно низкий уровень логов... также, это требует больше времени обработки (нет ничего сложного только с тремя вызовами, но накапливается если используется чаще...)

Источник

Это можно сделать с помощью Javscript, Ajax или Jquery, в зависимости от того, что у вас есть. Только php недостаточно для этого, так как без обновления вы не сможете запросить что-либо с сервера без ajax.

Источник

Печальная новость в том, что php не может этого сделать. Это происходит потому, что php был сделан - это предварительно обработанный скрипт. Это означает, что когда вы заходите на страницу php, сервер будет читать этот код, выполнять все строки внутри и, если есть какие-либо выходные данные, он будет отправлен в ваш браузер. Ваш HTML-код на самом деле является выводом вашего php-скрипта. ОЧЕНЬ важно понимать это при изучении php.

Выходными данными может быть текст HTML, JavaScript, только текст или даже изображения. Важно помнить, что любой вывод будет отображаться в вашем браузере только после того, как сервер завершит чтение вашего кода. Таким образом, любое динамическое действие не может быть сделано с помощью php. Когда вам нужна динамика, вам нужен JavaScript.

Источник
Другие вопросы по тегам