<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>shuilog &#187; javascript</title>
	<atom:link href="http://www.shuilog.com/articles/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.shuilog.com</link>
	<description>水水爱御姐也爱小萝莉</description>
	<lastBuildDate>Mon, 09 Aug 2010 13:56:38 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Golden girl-Google chrome炒纸黄金插件</title>
		<link>http://www.shuilog.com/articles/google-chrome-extension-golden-girl.html</link>
		<comments>http://www.shuilog.com/articles/google-chrome-extension-golden-girl.html#comments</comments>
		<pubDate>Thu, 20 May 2010 12:17:20 +0000</pubDate>
		<dc:creator>shuil</dc:creator>
				<category><![CDATA[插件软件]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[下载]]></category>
		<category><![CDATA[软件]]></category>

		<guid isPermaLink="false">http://www.shuilog.com/?p=659806</guid>
		<description><![CDATA[昨天制作了一款Google chrome插件&#8212;Golden girl。
Golden girl是一款炒纸黄金插件，可以帮助炒金者方便的查看纸黄金实时价格走势。实现方法其实很简单，只不过是从kitco 抓取了网站上提供的24小时纸黄金走势图。
另外，这段时间纸黄金价格有望回落，继续观望。香港风水命理专家邝伟雄师傅也曾说2010年是劫财年，还是谨慎投资吧，你看连房价都开始下降了嘛。

chrome插件Golden girl主要js代码
&#60;script&#62;
var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
var imgurl = &#8216;&#60;img src=http://www.kitco.cn/cn/live_charts/goldcny.gif?&#8217;+hh+mm+&#8216;&#62;&#8217;;
document.write(imgurl);
&#60;/script&#62;
chrome插件Golden girl下载
Golden girl插件页面：
https://chrome.google.com/extensions/detail/labgjhjfcbmpnjdcaefencglldgekdpl?hl=zh-CN

人家还要...使用kuler制作Google tips玩转谷歌配色方案最新不用翻-墙上youtube方法使用firefox代理插件访问Youtube的方法]]></description>
			<content:encoded><![CDATA[<p>昨天制作了一款Google chrome插件&#8212;<a href="https://chrome.google.com/extensions/detail/labgjhjfcbmpnjdcaefencglldgekdpl?hl=zh-CN">Golden girl</a>。</p>
<p>Golden girl是一款炒纸黄金插件，可以帮助炒金者方便的查看纸黄金实时价格走势。实现方法其实很简单，只不过是从<a href="http://www.kitco.cn/cn/">kitco</a> 抓取了网站上提供的24小时纸黄金走势图。</p>
<p>另外，这段时间纸黄金价格有望回落，继续观望。香港风水命理专家邝伟雄师傅也曾说2010年是劫财年，还是谨慎投资吧，你看连房价都开始下降了嘛。<span id="more-659806"></span></p>
<p><img class="aligncenter size-full wp-image-659810" title="golden-girl" src="http://www.shuilog.com/wp-content/uploads/2010/05/golden-girl.png" alt="golden-girl" width="663" height="463" /></p>
<h2>chrome插件Golden girl主要js代码</h2>
<p><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #000080; font-weight: bold;">var</span> <span style="color: #000000;">now</span> <span style="color: #000000;">=</span> <span style="color: #000080; font-weight: bold;">new</span> <span style="color: #000000;">Date</span>();<br />
<span style="color: #000080; font-weight: bold;">var</span> <span style="color: #000000;">hh</span> <span style="color: #000000;">=</span> <span style="color: #000000;">now</span><span style="color: #000000;">.</span><span style="color: #000000;">getHours</span>();<br />
<span style="color: #000080; font-weight: bold;">var</span> <span style="color: #000000;">mm</span> <span style="color: #000000;">=</span> <span style="color: #000000;">now</span><span style="color: #000000;">.</span><span style="color: #000000;">getMinutes</span>();<br />
<span style="color: #000080; font-weight: bold;">var</span> <span style="color: #000000;">imgurl</span> <span style="color: #000000;">=</span> <span style="color: #0000ff;">&#8216;&lt;img src=http://www.kitco.cn/cn/live_charts/goldcny.gif?&#8217;</span><span style="color: #000000;">+</span><span style="color: #000000;">hh</span><span style="color: #000000;">+</span><span style="color: #000000;">mm</span><span style="color: #000000;">+</span><span style="color: #0000ff;">&#8216;&gt;&#8217;</span>;<br />
<span style="color: #000000;">document</span><span style="color: #000000;">.</span><span style="color: #000000;">write</span>(<span style="color: #000000;">imgurl</span>);<br />
<span style="color: #000000;">&lt;</span><span style="color: #a61717; background-color: #e3d2d2;">/script&gt;</span></p>
<h2>chrome插件Golden girl下载</h2>
<p>Golden girl插件页面：</p>
<p><a href="https://chrome.google.com/extensions/detail/labgjhjfcbmpnjdcaefencglldgekdpl?hl=zh-CN">https://chrome.google.com/extensions/detail/labgjhjfcbmpnjdcaefencglldgekdpl?hl=zh-CN<br />
</a></p>
<h3  class="related_post_title">人家还要...</h3><ul class="related_post"><li><a href="http://www.shuilog.com/articles/kuler-google-tips-color-adobe-air.html" title="使用kuler制作Google tips玩转谷歌配色方案">使用kuler制作Google tips玩转谷歌配色方案</a></li><li><a href="http://www.shuilog.com/articles/fanqiang-proxy-ie-firefox-visit-youtube.html" title="最新不用翻-墙上youtube方法">最新不用翻-墙上youtube方法</a></li><li><a href="http://www.shuilog.com/articles/%e4%bd%bf%e7%94%a8%e4%bb%a3%e7%90%86%e8%ae%bf%e9%97%aeyoutube%e7%9a%84%e6%96%b9%e6%b3%95.html" title="使用firefox代理插件访问Youtube的方法">使用firefox代理插件访问Youtube的方法</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.shuilog.com/articles/google-chrome-extension-golden-girl.html/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>简易的投票系统PHP+MySql+js制作教程</title>
		<link>http://www.shuilog.com/articles/php-mysql-js-pic-vote.html</link>
		<comments>http://www.shuilog.com/articles/php-mysql-js-pic-vote.html#comments</comments>
		<pubDate>Tue, 19 Jan 2010 14:10:29 +0000</pubDate>
		<dc:creator>shuil</dc:creator>
				<category><![CDATA[电子编程]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mm]]></category>
		<category><![CDATA[mysql]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.shuilog.com/articles/php-mysql-js-pic-vote.html</guid>
		<description><![CDATA[本文介绍使用PHP+MySql+js制作简易的网上投票系统，先介绍一下最终的功能：访客没有投票前，显示投票链接，点击投票链接后调用js函数，通过js函数加载PHP程序，通过PHP程序连接MySql数据库，将投票数据插入到MySql数据库并返回全部票数，同时隐藏投票链接，防止访客多次恶意点击，当然，并不能真正的实现防作弊。

我在“如何增加博客评论数？”一文中曾介绍说，可以在博客评论处添加美女图片来勾引访客评论，所以，这两天我就给自己博客评论处添加了美女照片，为了防止访客每天都看到相同的美女导致审美疲劳，我通过PHP+Ajax技术实现了美女照片每分钟自动切换一张，一共有24*60=1440张，里面有女星、女优、校花、萝莉和御姐等等等等……应有尽有，同时欢迎大家推荐自己收藏的美女照片。目前时区使用的是中国上海时间，打算每月换一次时区。具体实现的方法可以查看我之前写的“美女时钟的制作”这篇文章。
另外，我突然想到可以做一个图片投票功能，让大家评选出自己喜欢的美女，所以，我先研究了一下可能吧的评论投票功能，未果，主要是不知道下面的这个链接网页具体是怎么实现的：
http://www.kenengba.com/wp-admin/?acv_ajax=true&#38;option=0&#38;ID=44131
所以，我只能靠自己仅有的那点PHP+MySql知识硬上了。不知道可能吧的评论投票功能是否用到了MySql数据库，反正我不用MySql数据库是实现不了投票功能的。
欢迎大家评论的同时为自己喜欢的美女投上一票。理论上，这种方法也应该能实现评论投票功能。

图片和投票链接显示部分
&#60;script type=”text/javascript” src=”http://www.google.com/jsapi”&#62;&#60;/script&#62;
&#60;script type=”text/javascript”&#62;
&#60;!–
google.load(”jquery”, “1.2″);
function displaymessage(){
$.get(”http://www.shuilog.com/time.php”, function(data){
var lefttime = data;
setTimeout(’displaymessage()’,1000*lefttime);
});
$(’#time_clock’).load(’http://www.shuilog.com/pic.php’);
$(’#picvote’).load(’http://www.shuilog.com/votelink.php’);
}
//–&#62;
&#60;/script&#62;
通过body onload=&#8221;displaymessage()&#8221;，每次访问时自动调用js函数displaymessage()，加载pic.php中的美女照片和votelink.php中的投票链接，并每当下一分钟到来时，利用Ajax自动重新加载美女照片和投票链接。美女照片部分请见之前介绍的“美女时钟的制作”
投票链接votelink.php部分
&#60;?php
echo $votestr=&#8220;&#60;a href=\&#8221;javascript:picvote();\&#8221;&#62;投票&#60;/a&#62;&#8221;
?&#62;
当点击“投票”链接时，调用js函数picvote()。
js函数picvote()部分
&#60;script type=&#8220;text/javascript&#8221;&#62;
&#60;!&#8211;
google.load(&#8220;jquery&#8221;, &#8220;1.2&#8243;);
function picvote(){
$(&#8216;#picvote&#8217;).load(&#8216;http://www.shuilog.com/picvote.php&#8217;);
}
//&#8211;&#62;
&#60;/script&#62;
picvote()函数加载picvote.php文件显示总票数并隐藏投票链接（因为之前加载的投票链接和现在加载的总票数都是在ID为#picvote的div中显示，所以，点击投票链接后就会自动隐藏投票链接并显示总票数，然后在下一分钟到来后又会自动调用js函数displaymessage()重新加载投票链接，以便为新的照片投票）。
修改并读取MySql数据库图片投票数据部分picvote.php
&#60;?php
date_default_timezone_set(&#8216;Asia/Shanghai&#8217;);
$nowtime=date(&#8220;Hi&#8221;);
$mysql_server_name=&#8220;localhost&#8221;;
$mysql_username=&#8220;root&#8221;;
$mysql_password=&#8220;123456&#8243;;
$mysql_database=&#8220;shuil&#8221;;
$conn=mysql_connect($mysql_server_name, $mysql_username, $mysql_password);
$i_sql=&#8220;SELECT  `vote` FROM  `picvote` WHERE TIME =  &#8216;$nowtime&#8216;&#8221;;
$i_result=mysql_db_query($mysql_database, $i_sql, $conn);
$i_row=mysql_fetch_row($i_result);
if(!$i_row[0])
{
$insert_sql=&#8220;INSERT INTO  `shuil_shuil`.`picvote` (`time` ,`vote`)VALUES (&#8217;$nowtime&#8216;,  &#8216;0&#8242;)&#8221;;
$insert_result=mysql_db_query($mysql_database, $insert_sql, $conn);
}
$j=$i_row[0]+1;
$j_sql=&#8220;UPDATE  `shuil_shuil`.`picvote` SET  `vote` =  &#8216;$j&#8216; WHERE TIME =  &#8216;$nowtime&#8216;&#8221;;
$j_result=mysql_db_query($mysql_database, $j_sql, $conn);
$vote_sql=&#8220;SELECT  `vote` FROM  `picvote` WHERE TIME =  &#8216;$nowtime&#8216;&#8221;;
$vote_result=mysql_db_query($mysql_database, $vote_sql, $conn);
$vote_row=mysql_fetch_row($vote_result);
for($i=0;$i [...]]]></description>
			<content:encoded><![CDATA[<p>本文介绍使用PHP+MySql+js制作简易的网上投票系统，先介绍一下最终的功能：访客没有投票前，显示投票链接，点击投票链接后调用js函数，通过js函数加载PHP程序，通过PHP程序连接MySql数据库，将投票数据插入到MySql数据库并返回全部票数，同时隐藏投票链接，防止访客多次恶意点击，当然，并不能真正的实现防作弊。</p>
<p><span id="more-659657"></span></p>
<p>我在“<a href="http://www.shuilog.com/articles/how-improve-blog-comments.html">如何增加博客评论数？</a>”一文中曾介绍说，可以在博客评论处添加美女图片来勾引访客评论，所以，这两天我就给自己博客评论处添加了美女照片，为了防止访客每天都看到相同的美女导致审美疲劳，我通过PHP+Ajax技术实现了美女照片每分钟自动切换一张，一共有24*60=1440张，里面有女星、女优、校花、萝莉和御姐等等等等……应有尽有，同时欢迎大家推荐自己收藏的美女照片。目前时区使用的是中国上海时间，打算每月换一次时区。具体实现的方法可以查看我之前写的“<a href="http://www.shuilog.com/articles/mm-clock-design-tutorial.html">美女时钟的制作</a>”这篇文章。</p>
<p>另外，我突然想到可以做一个图片投票功能，让大家评选出自己喜欢的美女，所以，我先研究了一下可能吧的评论投票功能，未果，主要是不知道下面的这个链接网页具体是怎么实现的：</p>
<blockquote><p><a title="http://www.kenengba.com/wp-admin/?acv_ajax=true&amp;option=0&amp;ID=44131" href="http://www.kenengba.com/wp-admin/?acv_ajax=true&amp;option=0&amp;ID=44131">http://www.kenengba.com/wp-admin/?acv_ajax=true&amp;option=0&amp;ID=44131</a></p></blockquote>
<p>所以，我只能靠自己仅有的那点PHP+MySql知识硬上了。不知道可能吧的评论投票功能是否用到了MySql数据库，反正我不用MySql数据库是实现不了投票功能的。</p>
<p>欢迎大家评论的同时为自己喜欢的美女投上一票。理论上，这种方法也应该能实现评论投票功能。</p>
<p><a href="http://www.shuilog.com/wp-content/uploads/2010/01/php.jpg"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="php" src="http://www.shuilog.com/wp-content/uploads/2010/01/php_thumb.jpg" border="0" alt="php" width="231" height="244" /></a></p>
<h2>图片和投票链接显示部分</h2>
<p><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span> <span style="color: #000000;">type</span><span style="color: #000000;">=</span><span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">text</span><span style="color: #000000;">/</span><span style="color: #000000;">javascript</span><span style="color: #f00000; background-color: #f0a0a0;">”</span> <span style="color: #000000;">src</span><span style="color: #000000;">=</span><span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">http</span><span style="color: #000000;">://</span><span style="color: #000000;">www</span><span style="color: #000000;">.</span><span style="color: #000000;">google</span><span style="color: #000000;">.</span><span style="color: #000000;">com</span><span style="color: #000000;">/</span><span style="color: #000000;">jsapi</span><span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">&gt;&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span> <span style="color: #000000;">type</span><span style="color: #000000;">=</span><span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">text</span><span style="color: #000000;">/</span><span style="color: #000000;">javascript</span><span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #000000;">&lt;!</span><span style="color: #f00000; background-color: #f0a0a0;">–</span><br />
<span style="color: #000000;">google</span><span style="color: #000000;">.</span><span style="color: #000000;">load</span>(<span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">jquery</span><span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">,</span> <span style="color: #f00000; background-color: #f0a0a0;">“</span><span style="color: #009999;">1.2</span><span style="color: #f00000; background-color: #f0a0a0;">″</span>);<br />
<span style="color: #0000aa;">function</span> <span style="color: #000000;">displaymessage</span><span style="color: #000000;">(){</span><br />
<span style="color: #000000;">$</span><span style="color: #000000;">.</span><span style="color: #000000;">get</span>(<span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">http</span><span style="color: #000000;">://</span><span style="color: #000000;">www</span><span style="color: #000000;">.</span><span style="color: #000000;">shuilog</span><span style="color: #000000;">.</span><span style="color: #000000;">com</span><span style="color: #000000;">/</span><span style="color: #000000;">time</span><span style="color: #000000;">.</span><span style="color: #000000;">php</span><span style="color: #f00000; background-color: #f0a0a0;">”</span><span style="color: #000000;">,</span> <span style="color: #0000aa;">function</span>(<span style="color: #000000;">data</span><span style="color: #000000;">){</span><br />
<span style="color: #0000aa;">var</span> <span style="color: #000000;">lefttime</span> <span style="color: #000000;">=</span> <span style="color: #000000;">data</span>;<br />
<span style="color: #000000;">setTimeout</span>(<span style="color: #f00000; background-color: #f0a0a0;">’</span><span style="color: #000000;">displaymessage</span>()<span style="color: #f00000; background-color: #f0a0a0;">’</span><span style="color: #000000;">,</span><span style="color: #009999;">1000</span><span style="color: #000000;">*</span><span style="color: #000000;">lefttime</span>);<br />
<span style="color: #000000;">});</span><br />
<span style="color: #000000;">$</span>(<span style="color: #f00000; background-color: #f0a0a0;">’#</span><span style="color: #000000;">time_clock</span><span style="color: #f00000; background-color: #f0a0a0;">’</span><span style="color: #000000;">).</span><span style="color: #000000;">load</span>(<span style="color: #f00000; background-color: #f0a0a0;">’</span><span style="color: #000000;">http</span><span style="color: #000000;">://</span><span style="color: #000000;">www</span><span style="color: #000000;">.</span><span style="color: #000000;">shuilog</span><span style="color: #000000;">.</span><span style="color: #000000;">com</span><span style="color: #000000;">/</span><span style="color: #000000;">pic</span><span style="color: #000000;">.</span><span style="color: #000000;">php</span><span style="color: #f00000; background-color: #f0a0a0;">’</span>);<br />
<span style="color: #000000;">$</span>(<span style="color: #f00000; background-color: #f0a0a0;">’#</span><span style="color: #000000;">picvote</span><span style="color: #f00000; background-color: #f0a0a0;">’</span><span style="color: #000000;">).</span><span style="color: #000000;">load</span>(<span style="color: #f00000; background-color: #f0a0a0;">’</span><span style="color: #000000;">http</span><span style="color: #000000;">://</span><span style="color: #000000;">www</span><span style="color: #000000;">.</span><span style="color: #000000;">shuilog</span><span style="color: #000000;">.</span><span style="color: #000000;">com</span><span style="color: #000000;">/</span><span style="color: #000000;">votelink</span><span style="color: #000000;">.</span><span style="color: #000000;">php</span><span style="color: #f00000; background-color: #f0a0a0;">’</span>);<br />
<span style="color: #000000;">}</span><br />
<span style="color: #aaaaaa; font-style: italic;">//–&gt;</span><br />
<span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span></p>
<p>通过body onload=&#8221;displaymessage()&#8221;，每次访问时自动调用js函数displaymessage()，加载pic.php中的美女照片和votelink.php中的投票链接，并每当下一分钟到来时，利用Ajax自动重新加载美女照片和投票链接。美女照片部分请见之前介绍的“<a href="http://www.shuilog.com/articles/mm-clock-design-tutorial.html">美女时钟的制作</a>”</p>
<h2>投票链接votelink.php部分</h2>
<p><span style="color: #4c8317;">&lt;?php</span><br />
<span style="color: #0000aa;">echo</span> <span style="color: #aa0000;">$votestr</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;&lt;a href=</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;">javascript:picvote();</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;">&gt;投票&lt;/a&gt;&#8221;</span><br />
<span style="color: #4c8317;">?&gt;</span></p>
<p>当点击“投票”链接时，调用js函数picvote()。</p>
<h2>js函数picvote()部分</h2>
<p><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span> <span style="color: #000000;">type</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;text/javascript&#8221;</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #aaaaaa; font-style: italic;">&lt;!&#8211;</span><br />
<span style="color: #000000;">google</span><span style="color: #000000;">.</span><span style="color: #000000;">load</span>(<span style="color: #aa5500;">&#8220;jquery&#8221;</span><span style="color: #000000;">,</span> <span style="color: #aa5500;">&#8220;1.2&#8243;</span>);<br />
<span style="color: #0000aa;">function</span> <span style="color: #000000;">picvote</span><span style="color: #000000;">(){</span><br />
<span style="color: #000000;">$</span>(<span style="color: #aa5500;">&#8216;#picvote&#8217;</span><span style="color: #000000;">).</span><span style="color: #000000;">load</span>(<span style="color: #aa5500;">&#8216;http://www.shuilog.com/picvote.php&#8217;</span>);<br />
<span style="color: #000000;">}</span><br />
<span style="color: #aaaaaa; font-style: italic;">//&#8211;&gt;</span><br />
<span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span></p>
<p>picvote()函数加载picvote.php文件显示总票数并隐藏投票链接（因为之前加载的投票链接和现在加载的总票数都是在ID为#picvote的div中显示，所以，点击投票链接后就会自动隐藏投票链接并显示总票数，然后在下一分钟到来后又会自动调用js函数displaymessage()重新加载投票链接，以便为新的照片投票）。</p>
<h2>修改并读取MySql数据库图片投票数据部分picvote.php</h2>
<p><span style="color: #4c8317;">&lt;?php</span><br />
<span style="color: #000000;">date_default_timezone_set</span>(<span style="color: #aa5500;">&#8216;Asia/Shanghai&#8217;</span>);<br />
<span style="color: #aa0000;">$nowtime</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">date</span>(<span style="color: #aa5500;">&#8220;Hi&#8221;</span>);<br />
<span style="color: #aa0000;">$mysql_server_name</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;localhost&#8221;</span>;<br />
<span style="color: #aa0000;">$mysql_username</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;root&#8221;</span>;<br />
<span style="color: #aa0000;">$mysql_password</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;123456&#8243;</span>;<br />
<span style="color: #aa0000;">$mysql_database</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;shuil&#8221;</span>;<br />
<span style="color: #aa0000;">$conn</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_connect</span>(<span style="color: #aa0000;">$mysql_server_name</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$mysql_username</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$mysql_password</span>);<br />
<span style="color: #aa0000;">$i_sql</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;SELECT  `vote` FROM  `picvote` WHERE TIME =  &#8216;</span><span style="color: #aa5500;">$nowtime</span><span style="color: #aa5500;">&#8216;&#8221;</span>;<br />
<span style="color: #aa0000;">$i_result</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_db_query</span>(<span style="color: #aa0000;">$mysql_database</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$i_sql</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$conn</span>);<br />
<span style="color: #aa0000;">$i_row</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_fetch_row</span>(<span style="color: #aa0000;">$i_result</span>);<br />
<span style="color: #0000aa;">if</span>(<span style="color: #000000;">!</span><span style="color: #aa0000;">$i_row</span><span style="color: #000000;">[</span><span style="color: #009999;">0</span><span style="color: #000000;">])</span><br />
<span style="color: #000000;">{</span><br />
<span style="color: #aa0000;">$insert_sql</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;INSERT INTO  `shuil_shuil`.`picvote` (`time` ,`vote`)VALUES (&#8217;</span><span style="color: #aa5500;">$nowtime</span><span style="color: #aa5500;">&#8216;,  &#8216;0&#8242;)&#8221;</span>;<br />
<span style="color: #aa0000;">$insert_result</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_db_query</span>(<span style="color: #aa0000;">$mysql_database</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$insert_sql</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$conn</span>);<br />
<span style="color: #000000;">}</span><br />
<span style="color: #aa0000;">$j</span><span style="color: #000000;">=</span><span style="color: #aa0000;">$i_row</span><span style="color: #000000;">[</span><span style="color: #009999;">0</span><span style="color: #000000;">]</span><span style="color: #000000;">+</span><span style="color: #009999;">1</span>;<br />
<span style="color: #aa0000;">$j_sql</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;UPDATE  `shuil_shuil`.`picvote` SET  `vote` =  &#8216;</span><span style="color: #aa5500;">$j</span><span style="color: #aa5500;">&#8216; WHERE TIME =  &#8216;</span><span style="color: #aa5500;">$nowtime</span><span style="color: #aa5500;">&#8216;&#8221;</span>;<br />
<span style="color: #aa0000;">$j_result</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_db_query</span>(<span style="color: #aa0000;">$mysql_database</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$j_sql</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$conn</span>);<br />
<span style="color: #aa0000;">$vote_sql</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;SELECT  `vote` FROM  `picvote` WHERE TIME =  &#8216;</span><span style="color: #aa5500;">$nowtime</span><span style="color: #aa5500;">&#8216;&#8221;</span>;<br />
<span style="color: #aa0000;">$vote_result</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_db_query</span>(<span style="color: #aa0000;">$mysql_database</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$vote_sql</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$conn</span>);<br />
<span style="color: #aa0000;">$vote_row</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_fetch_row</span>(<span style="color: #aa0000;">$vote_result</span>);<br />
<span style="color: #0000aa;">for</span>(<span style="color: #aa0000;">$i</span><span style="color: #000000;">=</span><span style="color: #009999;">0</span>;<span style="color: #aa0000;">$i</span> <span style="color: #000000;">&lt;</span> <span style="color: #00aaaa;">strlen</span>(<span style="color: #aa0000;">$vote_row</span><span style="color: #000000;">[</span><span style="color: #009999;">0</span><span style="color: #000000;">]);</span><span style="color: #aa0000;">$i</span><span style="color: #000000;">++</span>)<br />
<span style="color: #000000;">{</span><br />
<span style="color: #aa0000;">$numbit</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">&#8220;</span><span style="color: #aa5500;">$vote_row[0]</span><span style="color: #aa5500;">&#8220;</span><span style="color: #000000;">,</span><span style="color: #aa0000;">$i</span><span style="color: #000000;">,</span><span style="color: #009999;">1</span>);<br />
<span style="color: #aa0000;">$imgstr</span><span style="color: #000000;">.=</span><span style="color: #aa5500;">&#8220;&lt;img src=</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;">http://www.shuilog.com/img/num/</span><span style="color: #aa5500;">$numbit</span><span style="color: #aa5500;">.png</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;"> height=</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;">15px</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;"> width=</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;">15px</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;">&gt;&lt;/img&gt;&#8221;</span>;<br />
<span style="color: #000000;">}</span><br />
<span style="color: #0000aa;">echo</span> <span style="color: #aa0000;">$img_str</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;&lt;p&gt;</span><span style="color: #aa5500;">$imgstr</span><span style="color: #aa5500;">&lt;/p&gt;&#8221;</span>;<br />
<span style="color: #4c8317;">?&gt;</span></p>
<p>picvote.php文件中先判断是否有当前图片的数据，如果没有则先插入一条当前图片的投票数据time=$nowtime和vote=0，然后将vote值加1并修改数据库；如果已经有了当前图片的投票数据，则直接将vote值加1并修改数据库。然后，读取出总票数并将总票数用图片显示在网页。</p>
<p>读取总票数的语句好像有点多余，不管了，反正也花不了多少时间。</p>
<h3>将票数用图片显示</h3>
<blockquote class="q">
<h2>关于PHP函数substr()</h2>
<p>substr()函数用来提取字符串中的一段字符串。</p>
<p>使用范例：</p>
<p><span style="color: #4c8317;">&lt;?</span><br />
<span style="color: #0000aa;">echo</span> <span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">“abcdef”</span><span style="color: #000000;">,</span> <span style="color: #009999;">1</span><span style="color: #000000;">,</span> <span style="color: #009999;">3</span>); <span style="color: #aaaaaa; font-style: italic;">// 返回 “bcd”</span><br />
<span style="color: #0000aa;">echo</span> <span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">“abcdef”</span><span style="color: #000000;">,</span> <span style="color: #000000;">-</span><span style="color: #009999;">2</span>); <span style="color: #aaaaaa; font-style: italic;">// 返回 “ef”</span><br />
<span style="color: #0000aa;">echo</span> <span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">“abcdef”</span><span style="color: #000000;">,</span> <span style="color: #000000;">-</span><span style="color: #009999;">3</span><span style="color: #000000;">,</span> <span style="color: #009999;">1</span>); <span style="color: #aaaaaa; font-style: italic;">// 返回 “d”</span><br />
<span style="color: #0000aa;">echo</span> <span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">“abcdef”</span><span style="color: #000000;">,</span> <span style="color: #009999;">1</span><span style="color: #000000;">,</span> <span style="color: #000000;">-</span><span style="color: #009999;">1</span>); <span style="color: #aaaaaa; font-style: italic;">// 返回 “bcde”</span><br />
<span style="color: #4c8317;">?&gt;</span></p></blockquote>
<p>为了美观一点，让显示的票数和MM们的照片相匹配，我将总票数用图片来显示。</p>
<p>首先，Google 10张0、1、2……9的数字png格式的图片。然后从字符串总票数中提取出单个的数字字符。比如，总票数为254，则从&#8221;254&#8243;中提取出数字2、5和4。</p>
<p>使用PHP函数strlen()计算出总票数(&#8221;254&#8243;)的字符串长度$i(3)，用PHP函数<a href="http://www.shuilog.com/articles/php-mysql-ip-timezone-time.html">substr()</a>提取出单个的数字(2、5和4)，用“.”将html图片显示代码以string形式连接起来。</p>
<p>for($i=0;$i &lt; strlen($vote_row[0]);$i++)<br />
{<br />
$numbit=substr(&#8221;$vote_row[0]&#8220;,$i,1);<br />
$imgstr.=&#8221;&lt;img src=\&#8221;http://www.shuilog.com/img/num/$numbit.png\&#8221; height=\&#8221;15px\&#8221; width=\&#8221;15px\&#8221;&gt;&lt;/img&gt;&#8221;;<br />
}</p>
<h3  class="related_post_title">人家还要...</h3><ul class="related_post"><li><a href="http://www.shuilog.com/articles/mm-clock-design-tutorial.html" title="日本美女时钟制作教程">日本美女时钟制作教程</a></li><li><a href="http://www.shuilog.com/articles/php-mysql-ip-timezone-time.html" title="PHP+MySql获取访客IP、时区和时间">PHP+MySql获取访客IP、时区和时间</a></li><li><a href="http://www.shuilog.com/articles/ajax-auto-settimeout-refresh-web.html" title="Ajax+jquery实现自动定时刷新局部网页">Ajax+jquery实现自动定时刷新局部网页</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.shuilog.com/articles/php-mysql-js-pic-vote.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Ajax+jquery实现自动定时刷新局部网页</title>
		<link>http://www.shuilog.com/articles/ajax-auto-settimeout-refresh-web.html</link>
		<comments>http://www.shuilog.com/articles/ajax-auto-settimeout-refresh-web.html#comments</comments>
		<pubDate>Mon, 11 Jan 2010 02:33:44 +0000</pubDate>
		<dc:creator>shuil</dc:creator>
				<category><![CDATA[电子编程]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://www.shuilog.com/?p=659605</guid>
		<description><![CDATA[本文以美女时钟的制作为例子，介绍如何利用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，每张对应当前时间分钟的后一位数字。
&#60;?php
header(&#8220;expires:mon,26jul199705:00:00gmt&#8221;);
header(&#8220;cache-control:no-cache,must-revalidate&#8221;);
header(&#8220;pragma:no-cache&#8221;); include &#8220;ip.php&#8221;;
$nows=substr(&#8220;$nowtime&#8220;,3,1);//提取出当前时间分钟的后一位数字
echo $str=&#8220;&#60;p&#62;&#60;img src=\&#8221;img/$nows.jpg\&#8221; width=500px height=300px /&#62;&#60;/p&#62;&#8221;;
?&#62;
上面的代码还包含了一些PHP的header函数，主要是因为我发现IE浏览器开启缓存后会导致美女时钟图片不改变，所以添加了强制禁止浏览器缓存的函数。
什么时候恰当的刷新图片？
当然是在整分钟是马上刷新图片了，那么，如何保证图片的整分钟时刷新呢？
这个问题只需要一个灰常灰常简单的算法。计算当前访客时间距离下一分钟的秒数$lefttime并传递给javascript函数，然后lefttime秒后使用Ajax刷新，刷新时再计算一次$lefttime并动态传递给javascript函数，因为刷新时正好是整分钟，所以之后lefttime一直等于60，也就实现了整分钟时刷新。
&#60;?php
include &#8220;ip.php&#8221;;
echo $lefttime=60-substr(&#8220;$nowtime&#8220;,4,2);
?&#62;
Ajax+jquery实现自动定时刷新局部网页
因为每分钟变化的部分只有美女时钟图片，网页的其他信息都没有变化，所以我们没有必要向服务器发送整个网页请求，仅仅需要利用Ajax+jquery技术向服务器取回美女时钟图片信息和当前访客时间距离下一分钟的秒数$lefttime即可。
我对jquery不是很了解，以下代码是在 sunajia编写的基础上并在 leeiio 的指导下山寨出来的。
&#60;script type=&#8220;text/javascript&#8221; src=&#8220;http://www.google.com/jsapi&#8221;&#62;&#60;/script&#62;
&#60;script type=&#8220;text/javascript&#8221;&#62;
&#60;!&#8211;
google.load(&#8220;jquery&#8221;, &#8220;1.2&#8243;);
function displaymessage(){
$.get(&#8220;time.php&#8221;, function(data){
var lefttime = data;
setTimeout(&#8216;displaymessage()&#8217;,1000*lefttime);//定时刷新函数
});
$(&#8216;#time_clock&#8217;).load(&#8216;pic.php&#8217;); //#time_clock为对应的用来显示美女时钟图片的div的id
}
//&#8211;&#62;
&#60;/script&#62;?&#62;
人家还要...日本美女时钟制作教程简易的投票系统PHP+MySql+js制作教程PHP+MySql获取访客IP、时区和时间]]></description>
			<content:encoded><![CDATA[<p>本文以<a href="http://www.shuilog.com/articles/mm-clock-design-tutorial.html">美女时钟的制作</a>为例子，介绍如何利用Ajax+jquery技术实现自动定时刷新局部网页。</p>
<p>通过上篇《<a href="http://www.shuilog.com/articles/php-mysql-ip-timezone-time.html">PHP+MySql获取访客IP、时区和时间</a>》，我们已经学会了如何利用PHP+MySql获取访客的当前时间，接下来我们就要利用Ajax+jquery技术实现自动定时刷新美女时钟了。</p>
<p>在介绍利用Ajax+jquery技术实现自动定时刷新美女时钟之前，我们还需要解决两个小问题。一个是如何将美女时钟图片与当前时间对应，另一个是什么时候恰当的刷新图片。</p>
<p>不用担心，它们都很简单。<span id="more-659605"></span></p>
<p><img class="aligncenter size-full wp-image-659822" title="mm" src="http://image-001.yo2cdn.com/wp-content/uploads/149/14984/2009/12/mm.png" alt="mm" width="529" height="370" /></p>
<h3>如何将美女时钟图片与当前时间对应？</h3>
<p>在上篇中我们已经利用PHP+MySql获取了访客的当前时间，那么我们又该如何显示与之对应的美女时钟图片呢？</p>
<p>这个问题其实很简单。我们一共需要24*60=1440张美女时钟照片，我们<strong>将每张照片的名字以对应的时间来命名</strong>，比如，将18:54对应的美女时钟照片的名字命名为1854.jpg，然后再使用PHP调用就可以啦。</p>
<p>因为我手里没有1440张照片，所以便选择了10张照片，它们的名字分别是0、1、2……8、9，每张对应当前时间分钟的后一位数字。</p>
<p><span style="color: #008080;">&lt;?php</span><br />
<span style="color: #000000;">header</span>(<span style="color: #0000ff;">&#8220;expires:mon,26jul199705:00:00gmt&#8221;</span>);<br />
<span style="color: #000000;">header</span>(<span style="color: #0000ff;">&#8220;cache-control:no-cache,must-revalidate&#8221;</span>);<br />
<span style="color: #000000;">header</span>(<span style="color: #0000ff;">&#8220;pragma:no-cache&#8221;</span>); <span style="color: #000080; font-weight: bold;">include</span> <span style="color: #0000ff;">&#8220;ip.php&#8221;</span>;<br />
<span style="color: #000000;">$nows</span><span style="color: #000000;">=</span><span style="color: #000000;">substr</span>(<span style="color: #0000ff;">&#8220;</span><span style="color: #0000ff;">$nowtime</span><span style="color: #0000ff;">&#8220;</span><span style="color: #000000;">,</span><span style="color: #0000ff;">3</span><span style="color: #000000;">,</span><span style="color: #0000ff;">1</span>);<span style="color: #008800; font-style: italic;">//提取出当前时间分钟的后一位数字</span><br />
<span style="color: #000080; font-weight: bold;">echo</span> <span style="color: #000000;">$str</span><span style="color: #000000;">=</span><span style="color: #0000ff;">&#8220;&lt;p&gt;&lt;img src=</span><span style="color: #0000ff;">\&#8221;</span><span style="color: #0000ff;">img/</span><span style="color: #0000ff;">$nows</span><span style="color: #0000ff;">.jpg</span><span style="color: #0000ff;">\&#8221;</span><span style="color: #0000ff;"> width=500px height=300px /&gt;&lt;/p&gt;&#8221;</span>;<br />
<span style="color: #008080;">?&gt;</span></p>
<p>上面的代码还包含了一些PHP的header函数，主要是因为我发现IE浏览器开启缓存后会导致美女时钟图片不改变，所以添加了<strong>强制禁止浏览器缓存</strong>的函数。</p>
<h3>什么时候恰当的刷新图片？</h3>
<p>当然是在整分钟是马上刷新图片了，那么，如何保证图片的整分钟时刷新呢？</p>
<p>这个问题只需要一个灰常灰常简单的算法。计算当前访客时间距离下一分钟的秒数$lefttime并传递给javascript函数，然后lefttime秒后使用Ajax刷新，刷新时再计算一次$lefttime并动态传递给javascript函数，因为刷新时正好是整分钟，所以之后lefttime一直等于60，也就实现了整分钟时刷新。</p>
<p><span style="color: #008080;">&lt;?php</span><br />
<span style="color: #000080; font-weight: bold;">include</span> <span style="color: #0000ff;">&#8220;ip.php&#8221;</span>;<br />
<span style="color: #000080; font-weight: bold;">echo</span> <span style="color: #000000;">$lefttime</span><span style="color: #000000;">=</span><span style="color: #0000ff;">60</span><span style="color: #000000;">-</span><span style="color: #000000;">substr</span>(<span style="color: #0000ff;">&#8220;</span><span style="color: #0000ff;">$nowtime</span><span style="color: #0000ff;">&#8220;</span><span style="color: #000000;">,</span><span style="color: #0000ff;">4</span><span style="color: #000000;">,</span><span style="color: #0000ff;">2</span>);<br />
<span style="color: #008080;">?&gt;</span></p>
<h2>Ajax+jquery实现自动定时刷新局部网页</h2>
<p>因为每分钟变化的部分只有美女时钟图片，网页的其他信息都没有变化，所以我们没有必要向服务器发送整个网页请求，仅仅需要利用Ajax+jquery技术向服务器取回美女时钟图片信息和当前访客时间距离下一分钟的秒数$lefttime即可。</p>
<p>我对jquery不是很了解，以下代码是在 <a href="https://twitter.com/sunajia">sunajia</a>编写的基础上并在 <a href="http://leeiio.me/" target="_blank">leeiio</a> 的指导下山寨出来的。</p>
<p><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span> <span style="color: #000000;">type</span><span style="color: #000000;">=</span><span style="color: #0000ff;">&#8220;text/javascript&#8221;</span> <span style="color: #000000;">src</span><span style="color: #000000;">=</span><span style="color: #0000ff;">&#8220;http://www.google.com/jsapi&#8221;</span><span style="color: #000000;">&gt;&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span> <span style="color: #000000;">type</span><span style="color: #000000;">=</span><span style="color: #0000ff;">&#8220;text/javascript&#8221;</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #008800; font-style: italic;">&lt;!&#8211;</span><br />
<span style="color: #000000;">google</span><span style="color: #000000;">.</span><span style="color: #000000;">load</span>(<span style="color: #0000ff;">&#8220;jquery&#8221;</span><span style="color: #000000;">,</span> <span style="color: #0000ff;">&#8220;1.2&#8243;</span>);<br />
<span style="color: #000080; font-weight: bold;">function</span> <span style="color: #000000;">displaymessage</span><span style="color: #000000;">(){</span><br />
<span style="color: #000000;">$</span><span style="color: #000000;">.</span><span style="color: #000000;">get</span>(<span style="color: #0000ff;">&#8220;time.php&#8221;</span><span style="color: #000000;">,</span> <span style="color: #000080; font-weight: bold;">function</span>(<span style="color: #000000;">data</span><span style="color: #000000;">){</span><br />
<span style="color: #000080; font-weight: bold;">var</span> <span style="color: #000000;">lefttime</span> <span style="color: #000000;">=</span> <span style="color: #000000;">data</span>;<br />
<span style="color: #000000;">setTimeout</span>(<span style="color: #0000ff;">&#8216;displaymessage()&#8217;</span><span style="color: #000000;">,</span><span style="color: #0000ff;">1000</span><span style="color: #000000;">*</span><span style="color: #000000;">lefttime</span>);<span style="color: #008800; font-style: italic;">//定时刷新函数</span><br />
<span style="color: #000000;">});</span><br />
<span style="color: #000000;">$</span>(<span style="color: #0000ff;">&#8216;#time_clock&#8217;</span><span style="color: #000000;">).</span><span style="color: #000000;">load</span>(<span style="color: #0000ff;">&#8216;pic.php&#8217;</span>); <span style="color: #008800; font-style: italic;">//#time_clock为对应的用来显示美女时钟图片的div的id</span><br />
<span style="color: #000000;">}</span><br />
<span style="color: #008800; font-style: italic;">//&#8211;&gt;</span><br />
<span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;?&gt;</span></p>
<h3  class="related_post_title">人家还要...</h3><ul class="related_post"><li><a href="http://www.shuilog.com/articles/mm-clock-design-tutorial.html" title="日本美女时钟制作教程">日本美女时钟制作教程</a></li><li><a href="http://www.shuilog.com/articles/php-mysql-js-pic-vote.html" title="简易的投票系统PHP+MySql+js制作教程">简易的投票系统PHP+MySql+js制作教程</a></li><li><a href="http://www.shuilog.com/articles/php-mysql-ip-timezone-time.html" title="PHP+MySql获取访客IP、时区和时间">PHP+MySql获取访客IP、时区和时间</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.shuilog.com/articles/ajax-auto-settimeout-refresh-web.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>日本美女时钟制作教程</title>
		<link>http://www.shuilog.com/articles/mm-clock-design-tutorial.html</link>
		<comments>http://www.shuilog.com/articles/mm-clock-design-tutorial.html#comments</comments>
		<pubDate>Mon, 11 Jan 2010 02:27:43 +0000</pubDate>
		<dc:creator>shuil</dc:creator>
				<category><![CDATA[电子编程]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mm]]></category>
		<category><![CDATA[mysql]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://www.shuilog.com/?p=659599</guid>
		<description><![CDATA[
我们大家都知道那个著名的日本美女时钟网站，很不错的创意，可惜那些时钟MM却称不上美女。不管是不是美女，你是否知道这个美女时钟是怎么制作的？如果你也想制作美女时钟，那么就请继续看这篇PHP+MySql+javascript+Ajax美女时钟制作教程吧。
圣诞节那次“迎圣诞·送抱枕·送杯具”活动有一个获奖者叫Saturn，所以，前两天我便拿出电脑里存在已久的台湾中原大学孙仲岳（Saturn）老师讲的PHP视频教程看了一下，看完他讲的PHP制作计数器的教程后，突然想到我可不可以也用PHP制作一个美女时钟，于是就有这篇教程。

制作美女时钟过程中用到的技术有PHP、Mysql、Javascript和Ajax等
美女时钟示例网站
鉴于Yo2无法操作数据库，我把美女时钟安装到了我的博客备份网站（http://www.shuilog.com）。
大家点击“点我看美女”按钮后就会出现美女时钟，美女就是小爱啦。哇咔咔。美女时钟会每过一分钟切换一张小爱MM的照片。不过，小爱MM手里没有拿着当前时刻的图片。而且，目前我也找不出全部1440张美女照片，只好拿小爱MM的10张照片充数啦。等小爱哪天照完1440张带时刻的照片我再换上吧。
正常情况下，美女时钟会在整分钟时刻刷新图片，不过，由于我的博客空间速度限制，大约要花10-20秒加载图片，等浏览器有了缓存后，图片加载时间可以减少到1秒。
另外，由于我上传ip数据库几次都没有成功，所以，不得不自己做了一个简单的&#8221;国家代码-时区&#8221;的数据库，数据库里添加的国家也不全，只有美国、英国、法国、日本、韩国、澳大利亚和中国等几个我能想得起来的国家，所以，如果你来自阿富汗、非洲等国家，那么美女时钟只能按照国际标准格林威治时间刷新图片了。
国家代码是通过IP在线抓取的，所以，有时候会遇到抓取网站不响应的错误信息。
今天是我的生日，就当美女时钟是小爱送我的生日礼物吧。大家不要忘记祝我生日快乐，我也预祝大家元旦快乐哇。
另外，特别感谢 sunajia 和 leeiio 两位大牛的技术指导。
PHP版美女时钟制作导图
PHP版美女时钟的具体制作教程日后我再发表，今天先发表美女时钟制作导图。
更新：PHP版美女时钟的具体制作教程

PHP+MySql获取访客IP、时区和时间
Ajax实现自动定时刷新局部网页


PHP版美女时钟程序代码
好吧，再先发一下美女时钟的PHP程序代码。
//**********ip.php
&#60;?php
$iipp=$_SERVER["REMOTE_ADDR"];
?&#62;
&#60;?php
include &#8220;snoopy.php&#8221;;
$snoopy = new Snoopy;
$snoopy-&#62;fetchtext(&#8220;http://blogama.org/ip_query.php?ip=$iipp&#38;output=xml&#8221;);
$results=$snoopy-&#62;results;
$results1=substr(&#8220;$results&#8220;,strpos($results,&#8220;OK&#8221;)+3,2);
?&#62;
&#60;?php
$mysql_server_name=&#8220;localhost&#8221;;
$mysql_username=&#8220;root&#8221;;
$mysql_password=&#8220;123456&#8243;;
$mysql_database=&#8220;***&#8221;;
$conn=mysql_connect($mysql_server_name, $mysql_username, $mysql_password);
$sql=&#8220;SELECT time FROM  `ip2time`WHERE country=&#8217;$results1&#8216;&#8221;;
$result2=mysql_db_query($mysql_database, $sql, $conn);
$row=mysql_fetch_row($result2);
date_default_timezone_set($row[0]);
$nowtime=date(&#8220;His&#8221;);
echo $nowtimehi=date(&#8220;H:i&#8221;);
?&#62;
//*********pic.php
&#60;?php
header(&#8220;expires:mon,26jul199705:00:00gmt&#8221;);
header(&#8220;cache-control:no-cache,must-revalidate&#8221;);
header(&#8220;pragma:no-cache&#8221;);
include &#8220;ip.php&#8221;;
$nows=substr(&#8220;$nowtime&#8220;,3,1);
echo $str=&#8220;&#60;p&#62;&#60;img src=\&#8221;img/$nows.jpg\&#8221; width=500px height=300px /&#62;&#60;/p&#62;&#8221;;
?&#62;
//**********time.php
&#60;?php
include &#8220;ip.php&#8221;;
echo $lefttime=60-substr(&#8220;$nowtime&#8220;,4,2);
?&#62;
//*******index.php部分jscript代码
&#60;script type=&#8220;text/javascript&#8221; src=&#8220;http://www.google.com/jsapi&#8221;&#62;&#60;/script&#62;
&#60;script type=&#8220;text/javascript&#8221;&#62;
&#60;!&#8211;
google.load(&#8220;jquery&#8221;, &#8220;1.2&#8243;);
function displaymessage(){
$.get(&#8220;time.php&#8221;, function(data){
var lefttime = data;
setTimeout(&#8216;displaymessage()&#8217;,1000*lefttime);
});
$(&#8216;#time_clock&#8217;).load(&#8216;pic.php&#8217;);
}
//&#8211;&#62;
&#60;/script&#62;
人家还要...简易的投票系统PHP+MySql+js制作教程PHP+MySql获取访客IP、时区和时间Ajax+jquery实现自动定时刷新局部网页]]></description>
			<content:encoded><![CDATA[<div>
<p>我们大家都知道那个著名的<strong>日本美女时钟</strong>网站，很不错的创意，可惜那些时钟MM却称不上美女。不管是不是美女，你是否知道这个美女时钟是怎么制作的？如果你也想制作美女时钟，那么就请继续看这篇PHP+MySql+javascript+Ajax美女时钟制作教程吧。</p>
<p>圣诞节那次“<a href="http://www.shuilog.com/articles/happy-christmas-giveaway-pillow.html">迎圣诞·送抱枕·送杯具</a>”活动有一个获奖者叫Saturn，所以，前两天我便拿出电脑里存在已久的台湾中原大学孙仲岳（Saturn）老师讲的PHP视频教程看了一下，看完他讲的PHP制作计数器的教程后，突然想到我可不可以也用PHP制作一个美女时钟，于是就有这篇教程。<span id="more-659599"></span></p>
<p><img class="aligncenter size-full wp-image-659822" title="mm" src="http://www.shuilog.com/wp-content/uploads/149/14984/2009/12/mm.png" alt="mm" width="529" height="370" /></p>
<p>制作美女时钟过程中用到的技术有PHP、Mysql、Javascript和Ajax等</p>
<h2>美女时钟示例网站</h2>
<p>鉴于Yo2无法操作数据库，我把美女时钟安装到了我的博客备份网站（<a href="http://www.shuilog.com">http://www.shuilog.com</a>）。</p>
<p>大家点击“点我看美女”按钮后就会出现美女时钟，美女就是<a href="http://ell.im/">小爱</a>啦。哇咔咔。美女时钟会每过一分钟切换一张小爱MM的照片。不过，<strong>小爱MM手里没有拿着当前时刻的图片</strong>。而且，目前我也找不出全部1440张美女照片，<strong>只好拿小爱MM的10张照片充数啦</strong>。等小爱哪天照完1440张带时刻的照片我再换上吧。</p>
<p>正常情况下，美女时钟会在整分钟时刻刷新图片，不过，由于我的<strong>博客空间速度限制</strong>，大约要花10-20秒加载图片，等浏览器有了缓存后，图片加载时间可以减少到1秒。</p>
<p>另外，由于我上传ip数据库几次都没有成功，所以，不得不自己做了一个简单的&#8221;国家代码-时区&#8221;的数据库，<strong>数据库里添加的国家也不全</strong>，只有美国、英国、法国、日本、韩国、澳大利亚和中国等几个我能想得起来的国家，所以，如果你来自阿富汗、非洲等国家，那么美女时钟只能按照<strong>国际标准格林威治时间</strong>刷新图片了。</p>
<p>国家代码是通过IP在线抓取的，所以，有时候会遇到<strong>抓取网站不响应的错误信息</strong>。</p>
<p><strong>今天是我的生日</strong>，就当美女时钟是小爱送我的生日礼物吧。大家不要忘记祝我生日快乐，我也预祝大家元旦快乐哇。</p>
<p>另外，特别感谢 <a href="https://twitter.com/sunajia">sunajia</a> 和 <a href="http://leeiio.me/">leeiio </a>两位大牛的技术指导。</p>
<h2>PHP版美女时钟制作导图</h2>
<p>PHP版美女时钟的具体制作教程日后我再发表，今天先发表美女时钟制作导图。</p>
<h3>更新：PHP版美女时钟的具体制作教程</h3>
<ul>
<li><a href="http://www.shuilog.com/articles/php-mysql-ip-timezone-time.html">PHP+MySql获取访客IP、时区和时间</a></li>
<li><a href="http://www.shuilog.com/articles/ajax-auto-settimeout-refresh-web.html">Ajax实现自动定时刷新局部网页</a></li>
</ul>
<p><img class="aligncenter size-full wp-image-659820" title="mm-time" src="http://www.shuilog.com/wp-content/uploads/149/14984/2009/12/mm-time.png" alt="mm-time" width="501" height="567" /></p>
<h2>PHP版美女时钟程序代码</h2>
<p>好吧，再先发一下美女时钟的PHP程序代码。</p>
<p>//**********ip.php</p>
<p><span style="color: #4c8317;">&lt;?php</span><br />
<span style="color: #aa0000;">$iipp</span><span style="color: #000000;">=</span><span style="color: #aa0000;">$_SERVER</span><span style="color: #000000;">[</span><span style="color: #aa5500;">"REMOTE_ADDR"</span><span style="color: #000000;">];</span><br />
<span style="color: #4c8317;">?&gt;</span><br />
<span style="color: #4c8317;">&lt;?php</span><br />
<span style="color: #0000aa;">include</span> <span style="color: #aa5500;">&#8220;snoopy.php&#8221;</span>;<br />
<span style="color: #aa0000;">$snoopy</span> <span style="color: #000000;">=</span> <span style="color: #0000aa;">new</span> <span style="color: #000000;">Snoopy</span>;<br />
<span style="color: #aa0000;">$snoopy</span><span style="color: #000000;">-&gt;</span><span style="color: #1e90ff;">fetchtext</span>(<span style="color: #aa5500;">&#8220;http://blogama.org/ip_query.php?ip=</span><span style="color: #aa5500;">$iipp</span><span style="color: #aa5500;">&amp;output=xml&#8221;</span>);<br />
<span style="color: #aa0000;">$results</span><span style="color: #000000;">=</span><span style="color: #aa0000;">$snoopy</span><span style="color: #000000;">-&gt;</span><span style="color: #1e90ff;">results</span>;<br />
<span style="color: #aa0000;">$results1</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">&#8220;</span><span style="color: #aa5500;">$results</span><span style="color: #aa5500;">&#8220;</span><span style="color: #000000;">,</span><span style="color: #00aaaa;">strpos</span>(<span style="color: #aa0000;">$results</span><span style="color: #000000;">,</span><span style="color: #aa5500;">&#8220;OK&#8221;</span>)<span style="color: #000000;">+</span><span style="color: #009999;">3</span><span style="color: #000000;">,</span><span style="color: #009999;">2</span>);<br />
<span style="color: #4c8317;">?&gt;</span><br />
<span style="color: #4c8317;">&lt;?php</span><br />
<span style="color: #aa0000;">$mysql_server_name</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;localhost&#8221;</span>;<br />
<span style="color: #aa0000;">$mysql_username</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;root&#8221;</span>;<br />
<span style="color: #aa0000;">$mysql_password</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;123456&#8243;</span>;<br />
<span style="color: #aa0000;">$mysql_database</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;***&#8221;</span>;<br />
<span style="color: #aa0000;">$conn</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_connect</span>(<span style="color: #aa0000;">$mysql_server_name</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$mysql_username</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$mysql_password</span>);<br />
<span style="color: #aa0000;">$sql</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;SELECT time FROM  `ip2time`WHERE country=&#8217;</span><span style="color: #aa5500;">$results1</span><span style="color: #aa5500;">&#8216;&#8221;</span>;<br />
<span style="color: #aa0000;">$result2</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_db_query</span>(<span style="color: #aa0000;">$mysql_database</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$sql</span><span style="color: #000000;">,</span> <span style="color: #aa0000;">$conn</span>);<br />
<span style="color: #aa0000;">$row</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">mysql_fetch_row</span>(<span style="color: #aa0000;">$result2</span>);<br />
<span style="color: #000000;">date_default_timezone_set</span>(<span style="color: #aa0000;">$row</span><span style="color: #000000;">[</span><span style="color: #009999;">0</span><span style="color: #000000;">]);</span><br />
<span style="color: #aa0000;">$nowtime</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">date</span>(<span style="color: #aa5500;">&#8220;His&#8221;</span>);<br />
<span style="color: #0000aa;">echo</span> <span style="color: #aa0000;">$nowtimehi</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">date</span>(<span style="color: #aa5500;">&#8220;H:i&#8221;</span>);<br />
<span style="color: #4c8317;">?&gt;</span></p>
<p>//*********pic.php</p>
<p><span style="color: #4c8317;">&lt;?php</span><br />
<span style="color: #00aaaa;">header</span>(<span style="color: #aa5500;">&#8220;expires:mon,26jul199705:00:00gmt&#8221;</span>);<br />
<span style="color: #00aaaa;">header</span>(<span style="color: #aa5500;">&#8220;cache-control:no-cache,must-revalidate&#8221;</span>);<br />
<span style="color: #00aaaa;">header</span>(<span style="color: #aa5500;">&#8220;pragma:no-cache&#8221;</span>);<br />
<span style="color: #0000aa;">include</span> <span style="color: #aa5500;">&#8220;ip.php&#8221;</span>;<br />
<span style="color: #aa0000;">$nows</span><span style="color: #000000;">=</span><span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">&#8220;</span><span style="color: #aa5500;">$nowtime</span><span style="color: #aa5500;">&#8220;</span><span style="color: #000000;">,</span><span style="color: #009999;">3</span><span style="color: #000000;">,</span><span style="color: #009999;">1</span>);<br />
<span style="color: #0000aa;">echo</span> <span style="color: #aa0000;">$str</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;&lt;p&gt;&lt;img src=</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;">img/</span><span style="color: #aa5500;">$nows</span><span style="color: #aa5500;">.jpg</span><span style="color: #aa5500;">\&#8221;</span><span style="color: #aa5500;"> width=500px height=300px /&gt;&lt;/p&gt;&#8221;</span>;<br />
<span style="color: #4c8317;">?&gt;</span></p>
<p>//**********time.php</p>
<p><span style="color: #4c8317;">&lt;?php</span><br />
<span style="color: #0000aa;">include</span> <span style="color: #aa5500;">&#8220;ip.php&#8221;</span>;<br />
<span style="color: #0000aa;">echo</span> <span style="color: #aa0000;">$lefttime</span><span style="color: #000000;">=</span><span style="color: #009999;">60</span><span style="color: #000000;">-</span><span style="color: #00aaaa;">substr</span>(<span style="color: #aa5500;">&#8220;</span><span style="color: #aa5500;">$nowtime</span><span style="color: #aa5500;">&#8220;</span><span style="color: #000000;">,</span><span style="color: #009999;">4</span><span style="color: #000000;">,</span><span style="color: #009999;">2</span>);<br />
<span style="color: #4c8317;">?&gt;</span></p>
<p><span style="color: #aaaaaa; font-style: italic;">//*******index.php部分jscript代码</span><br />
<span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span> <span style="color: #000000;">type</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;text/javascript&#8221;</span> <span style="color: #000000;">src</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;http://www.google.com/jsapi&#8221;</span><span style="color: #000000;">&gt;&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span> <span style="color: #000000;">type</span><span style="color: #000000;">=</span><span style="color: #aa5500;">&#8220;text/javascript&#8221;</span><span style="color: #000000;">&gt;</span><br />
<span style="color: #aaaaaa; font-style: italic;">&lt;!&#8211;</span><br />
<span style="color: #000000;">google</span><span style="color: #000000;">.</span><span style="color: #000000;">load</span>(<span style="color: #aa5500;">&#8220;jquery&#8221;</span><span style="color: #000000;">,</span> <span style="color: #aa5500;">&#8220;1.2&#8243;</span>);<br />
<span style="color: #0000aa;">function</span> <span style="color: #000000;">displaymessage</span><span style="color: #000000;">(){</span><br />
<span style="color: #000000;">$</span><span style="color: #000000;">.</span><span style="color: #000000;">get</span>(<span style="color: #aa5500;">&#8220;time.php&#8221;</span><span style="color: #000000;">,</span> <span style="color: #0000aa;">function</span>(<span style="color: #000000;">data</span><span style="color: #000000;">){</span><br />
<span style="color: #0000aa;">var</span> <span style="color: #000000;">lefttime</span> <span style="color: #000000;">=</span> <span style="color: #000000;">data</span>;<br />
<span style="color: #000000;">setTimeout</span>(<span style="color: #aa5500;">&#8216;displaymessage()&#8217;</span><span style="color: #000000;">,</span><span style="color: #009999;">1000</span><span style="color: #000000;">*</span><span style="color: #000000;">lefttime</span>);<br />
<span style="color: #000000;">});</span><br />
<span style="color: #000000;">$</span>(<span style="color: #aa5500;">&#8216;#time_clock&#8217;</span><span style="color: #000000;">).</span><span style="color: #000000;">load</span>(<span style="color: #aa5500;">&#8216;pic.php&#8217;</span>);<br />
<span style="color: #000000;">}</span><br />
<span style="color: #aaaaaa; font-style: italic;">//&#8211;&gt;</span><br />
<span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span></div>
<h3  class="related_post_title">人家还要...</h3><ul class="related_post"><li><a href="http://www.shuilog.com/articles/php-mysql-js-pic-vote.html" title="简易的投票系统PHP+MySql+js制作教程">简易的投票系统PHP+MySql+js制作教程</a></li><li><a href="http://www.shuilog.com/articles/php-mysql-ip-timezone-time.html" title="PHP+MySql获取访客IP、时区和时间">PHP+MySql获取访客IP、时区和时间</a></li><li><a href="http://www.shuilog.com/articles/ajax-auto-settimeout-refresh-web.html" title="Ajax+jquery实现自动定时刷新局部网页">Ajax+jquery实现自动定时刷新局部网页</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.shuilog.com/articles/mm-clock-design-tutorial.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/


Served from: www.shuilog.com @ 2010-09-10 16:58:26 -->