shuilog

本文以美女时钟的制作为例子，介绍如何利用Ajax+jquery技术实现自动定时刷新局部网页。

通过上篇《PHP+MySql获取访客IP、时区和时间》，我们已经学会了如何利用PHP+MySql获取访客的当前时间，接下来我们就要利用Ajax+jquery技术实现自动定时刷新美女时钟了。

在介绍利用Ajax+jquery技术实现自动定时刷新美女时钟之前，我们还需要解决两个小问题。一个是如何将美女时钟图片与当前时间对应，另一个是什么时候恰当的刷新图片。

不用担心，它们都很简单。

如何将美女时钟图片与当前时间对应？

在上篇中我们已经利用PHP+MySql获取了访客的当前时间，那么我们又该如何显示与之对应的美女时钟图片呢？

这个问题其实很简单。我们一共需要24*60=1440张美女时钟照片，我们将每张照片的名字以对应的时间来命名，比如，将18:54对应的美女时钟照片的名字命名为1854.jpg，然后再使用PHP调用就可以啦。

因为我手里没有1440张照片，所以便选择了10张照片，它们的名字分别是0、1、2……8、9，每张对应当前时间分钟的后一位数字。

<?php
header(“expires:mon,26jul199705:00:00gmt”);
header(“cache-control:no-cache,must-revalidate”);
header(“pragma:no-cache”); include “ip.php”;
$nows=substr(“$nowtime“,3,1);//提取出当前时间分钟的后一位数字
echo $str=“<p><img src=\”img/$nows.jpg\” width=500px height=300px /></p>”;
?>

上面的代码还包含了一些PHP的header函数，主要是因为我发现IE浏览器开启缓存后会导致美女时钟图片不改变，所以添加了强制禁止浏览器缓存的函数。

什么时候恰当的刷新图片？

当然是在整分钟是马上刷新图片了，那么，如何保证图片的整分钟时刷新呢？

这个问题只需要一个灰常灰常简单的算法。计算当前访客时间距离下一分钟的秒数$lefttime并传递给javascript函数，然后lefttime秒后使用Ajax刷新，刷新时再计算一次$lefttime并动态传递给javascript函数，因为刷新时正好是整分钟，所以之后lefttime一直等于60，也就实现了整分钟时刷新。

<?php
include “ip.php”;
echo $lefttime=60-substr(“$nowtime“,4,2);
?>

Ajax+jquery实现自动定时刷新局部网页

因为每分钟变化的部分只有美女时钟图片，网页的其他信息都没有变化，所以我们没有必要向服务器发送整个网页请求，仅仅需要利用Ajax+jquery技术向服务器取回美女时钟图片信息和当前访客时间距离下一分钟的秒数$lefttime即可。

我对jquery不是很了解，以下代码是在 sunajia编写的基础上并在 leeiio 的指导下山寨出来的。

<script type=“text/javascript” src=“http://www.google.com/jsapi”></script>
<script type=“text/javascript”>
<!–
google.load(“jquery”, “1.2″);
function displaymessage(){
$.get(“time.php”, function(data){
var lefttime = data;
setTimeout(‘displaymessage()’,1000*lefttime);//定时刷新函数
});
$(‘#time_clock’).load(‘pic.php’); //#time_clock为对应的用来显示美女时钟图片的div的id
}
//–>
</script>?>

人家还要...

• 日本美女时钟制作教程
• 简易的投票系统PHP+MySql+js制作教程
• PHP+MySql获取访客IP、时区和时间