替代页面刷新PHP

时间:2015-01-29 15:07:05

标签: php html refresh clock live-update

我正在努力学习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 个答案:

答案 0 :(得分:1)

这可以通过Javscript,Ajax或Jquery来完成,无论你有哪些经验。只有php不足以做到这一点,因为没有刷新你不能从服务器请求没有ajax的东西。

答案 1 :(得分:1)

您可以(仅)使用Javascript:

(我添加了alt标签,因为这里的图片无法加载)

&#13;
&#13;
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)
&#13;
<span id="timer">
  <img src="" id="hours" alt="0">:
  <img src="" id="minutes" alt="0">:
  <img src="" id="seconds" alt="0">
</span>
&#13;
&#13;
&#13;

请注意,您应该预先加载图片!

<强> 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");

否则它们将作为常量变量进行检查并打印出通知,如果您的日志级别足够低,它会将您的日志垃圾邮件...此外,它需要更多的处理时间(只需要三次调用,但如果经常使用会累积......)

答案 2 :(得分:1)

令人遗憾的是,php无法做到这一点。发生这种情况是因为php是一个预处理的脚本。这意味着当您访问php页面时,服务器将读取该代码,在内部执行所有行,如果有任何输出,它将被发送到您的浏览器。您的HTML代码实际上是您的PHP脚本的输出。学习php时,了解这一点非常重要。

输出可以是HTML文本,JavaScript,仅文本甚至图像。在您的脑海中,重要的是任何输出只有在服务器完成读取代码后才会显示在浏览器中。因此任何动态操作都无法使用php完成。当您需要动态时,您需要JavaScript。