页面刷新的替代方法 PHP
Alternative To Page Refresh 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>
这可以用 Javscript 、Ajax 或 Jquery 来完成,无论你有过 .来自服务器的东西没有 ajax.
您可以(仅)使用 Javascript:
(我添加了alt标签,因为这里无法加载图片)
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");
否则它们将被检查为常量变量并打印出一条通知,这将垃圾邮件您的日志,如果您的日志级别足够低...此外,它需要更多的处理时间(没什么大不了的,只有三个调用,但如果使用更频繁,则可以累积...)
不幸的是php做不到。发生这种情况是因为 php 是一个预处理脚本。这意味着当您访问 php 页面时,服务器将读取该代码,在内部执行所有行,如果有任何输出,它将发送到您的浏览器。您 HTML 代码实际上是 php 脚本的输出。在学习 php.
时理解这一点非常重要
输出可以是 HTML 文本,JavaScript,只能是文本甚至是图像。在您的脑海中重要的是,任何输出只会在服务器完成读取您的代码后显示在您的浏览器中。所以使用 php 无法完成任何动态操作。当你需要动态的时候,你需要JavaScript.
我正在努力学习 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>
这可以用 Javscript 、Ajax 或 Jquery 来完成,无论你有过 .来自服务器的东西没有 ajax.
您可以(仅)使用 Javascript:
(我添加了alt标签,因为这里无法加载图片)
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");
否则它们将被检查为常量变量并打印出一条通知,这将垃圾邮件您的日志,如果您的日志级别足够低...此外,它需要更多的处理时间(没什么大不了的,只有三个调用,但如果使用更频繁,则可以累积...)
不幸的是php做不到。发生这种情况是因为 php 是一个预处理脚本。这意味着当您访问 php 页面时,服务器将读取该代码,在内部执行所有行,如果有任何输出,它将发送到您的浏览器。您 HTML 代码实际上是 php 脚本的输出。在学习 php.
时理解这一点非常重要输出可以是 HTML 文本,JavaScript,只能是文本甚至是图像。在您的脑海中重要的是,任何输出只会在服务器完成读取您的代码后显示在您的浏览器中。所以使用 php 无法完成任何动态操作。当你需要动态的时候,你需要JavaScript.