<?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>Neeke &#187; JavaScript</title>
	<atom:link href="http://www.ineeke.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ineeke.com</link>
	<description>悄悄记录点点滴滴</description>
	<lastBuildDate>Sat, 07 Jan 2012 13:04:27 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>博客下雪吧</title>
		<link>http://www.ineeke.com/archives/1319/</link>
		<comments>http://www.ineeke.com/archives/1319/#comments</comments>
		<pubDate>Fri, 17 Dec 2010 02:37:23 +0000</pubDate>
		<dc:creator>Neeke</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[雪花]]></category>

		<guid isPermaLink="false">http://www.ineeke.com/?p=1319</guid>
		<description><![CDATA[自从有了博客，每年差不多这个时候都会在博客弄点下雪的效果。嗯，最近北京好冷啊，还好有女朋友送的围巾和毛衣， n:-gg 暖和啊...北京最近是干冷干冷的，每天的风还大的不得了，越发的刺骨了，就是不见下雪啊，听说武汉都下雪了。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript变量作用域回顾" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1191%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/09/8089851.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量作用域回顾</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript变量与对象属性" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1187%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量与对象属性</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript原始数据类型包装对象" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1184%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript原始数据类型包装对象</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数属性和方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1197%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数属性和方法</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript闭包" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1205%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript闭包</font>
                    </a>
                </td>
        </tr>
        <br/>
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">来自无觅网络的相关文章：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Unobtrusive JavaScript in ASP.NET MVC 3" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2010%2F11%2Funobtrusive-javascript%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/13/7796162.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Unobtrusive JavaScript in ASP.NET MVC 3 (@dozer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="rails3.1.3 Could not find a JavaScript runtime. error" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fyoumeiyou.info%2Farticles%2Ferror-could-not-find-a-javascript-runtime&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">rails3.1.3 Could not find a JavaScript runtime. error (@youmeiyou)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Blogger、WordPress10个能用JavaScript实现的图片特效" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.omorer.cn%2F2008-04-29-blogger-wordpress10-one-can-use-javascript-to-achieve-a-picture-special-effects.html&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/16/12555100.jpg" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Blogger、WordPress10个能用JavaScript实现的图片特效 (@omorer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="博客第二次不能访问后恢复正常" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.52playpc.com%2Fblog-second-cannot-visit%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/08/02/20553564.jpg" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">博客第二次不能访问后恢复正常 (@52playpc)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="关于“雪花病毒”" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.dlxp.net%2Fabout-snow-virus.html&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/06/11212955.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">关于“雪花病毒” (@dlxp)</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>自从有了博客，每年差不多这个时候都会在博客弄点下雪的效果。嗯，最近北京好冷啊，还好有女朋友送的围巾和毛衣， n:-gg 暖和啊&#8230;北京最近是干冷干冷的，每天的风还大的不得了，越发的刺骨了，就是不见下雪啊，听说武汉都下雪了。<span id="more-1319"></span><br />
咳咳&#8230;唠叨完了，进入正题。北京不下，咱这里下！在主题的footer.php中加入如下代码：</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.schillmania.com/projects/snowstorm/snowstorm-min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
snowStorm.snowCharacter = '❉';
snowStorm.flakesMax = 1024;
snowStorm.vMaxX = 20;
snowStorm.vMaxY = 10;
snowStorm.snowColor = '#0000FF';
&lt;/script&gt;</pre></div></div>

<p>其实如果没有什么特殊需求的话，只需引入那个JS文件就可以了。不过，默认的雪花是“·”，我这里指定为“❉”，默认雪花颜色当然是白色啦，但是由于我的主题主色调的问题，白色雪花看不出效果，于是我把它指定为蓝色了，嘿嘿&#8230;效果不错哇。当然，可定制的参数还有很多，具体可以直接到http://www.schillmania.com/projects/snowstorm/查看。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript变量作用域回顾" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1191%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/09/8089851.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量作用域回顾</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript变量与对象属性" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1187%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量与对象属性</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript原始数据类型包装对象" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1184%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript原始数据类型包装对象</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数属性和方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1197%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数属性和方法</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript闭包" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1205%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript闭包</font>
                    </a>
                </td>
        </tr>
        <br/>
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">来自无觅网络的相关文章：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Unobtrusive JavaScript in ASP.NET MVC 3" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2010%2F11%2Funobtrusive-javascript%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/13/7796162.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Unobtrusive JavaScript in ASP.NET MVC 3 (@dozer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="rails3.1.3 Could not find a JavaScript runtime. error" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fyoumeiyou.info%2Farticles%2Ferror-could-not-find-a-javascript-runtime&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">rails3.1.3 Could not find a JavaScript runtime. error (@youmeiyou)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Blogger、WordPress10个能用JavaScript实现的图片特效" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.omorer.cn%2F2008-04-29-blogger-wordpress10-one-can-use-javascript-to-achieve-a-picture-special-effects.html&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/16/12555100.jpg" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Blogger、WordPress10个能用JavaScript实现的图片特效 (@omorer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="博客第二次不能访问后恢复正常" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.52playpc.com%2Fblog-second-cannot-visit%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/08/02/20553564.jpg" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">博客第二次不能访问后恢复正常 (@52playpc)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="关于“雪花病毒”" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.dlxp.net%2Fabout-snow-virus.html&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1319%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/06/11212955.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">关于“雪花病毒” (@dlxp)</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ineeke.com/archives/1319/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>JavaScript回车切换焦点</title>
		<link>http://www.ineeke.com/archives/1261/</link>
		<comments>http://www.ineeke.com/archives/1261/#comments</comments>
		<pubDate>Fri, 02 Jul 2010 06:56:42 +0000</pubDate>
		<dc:creator>Neeke</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.ineeke.com/archives/switch-the-focus-by-enter-key-in-javascript/</guid>
		<description><![CDATA[一般情况下，在一个form表单中如果存在一个input标签的type值为submit，那么直接敲回车键这个表单就提交了。且，一般情况下，网页中切换焦点都是使用Tab键来控制，顺序则由标签的index属性值来控制。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript变量作用域回顾" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1191%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/09/8089851.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量作用域回顾</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript闭包" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1205%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript闭包</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="javascript对象模型" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F381%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">javascript对象模型</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数作用域链" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1200%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数作用域链</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript绘制笑脸" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/07/11304948.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript绘制笑脸</font>
                    </a>
                </td>
        </tr>
        <br/>
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">来自无觅网络的相关文章：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Unobtrusive JavaScript in ASP.NET MVC 3" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2010%2F11%2Funobtrusive-javascript%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/13/7796162.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Unobtrusive JavaScript in ASP.NET MVC 3 (@dozer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="rails3.1.3 Could not find a JavaScript runtime. error" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fyoumeiyou.info%2Farticles%2Ferror-could-not-find-a-javascript-runtime&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">rails3.1.3 Could not find a JavaScript runtime. error (@youmeiyou)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用JavaScript制作弹出式窗口" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.dlxp.net%2F80.html&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/09/02/22348673.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用JavaScript制作弹出式窗口 (@dlxp)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="disabled 和 readonly 总结" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2012%2F01%2Fdisabled-and-readonly-summary%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/16/17631436.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">disabled 和 readonly 总结 (@dozer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="那些 WebForm 可以从 MVC 借鉴的东西 —— Ajax" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2011%2F12%2Fwebform-take-example-by-mvc-ajax%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/13/8175060.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">那些 WebForm 可以从 MVC 借鉴的东西 —— Ajax (@dozer)</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>一般情况下，在一个form表单中如果存在一个input标签的type值为submit，那么直接敲回车键这个表单就提交了。且，一般情况下，网页中切换焦点都是使用Tab键来控制，顺序则由标签的index属性值来控制。<span id="more-1261"></span><br />
不过，为了使用者的方便（并不一定方便，而是客户的需求，客户觉得Tab不方便。），我们需要用JavaScript来重新实现一番，要能够通过回车切换焦点而不提交表单。<br />
可以这么来实现：每个input都赋予唯一id值，且id是有规律有次序的（如共有n个，则id值依次为：i1,i2,i3&#8230;in）。首先获取所有的input标签：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> inputs <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>接下来遍历并处理onkeyup事件，回车键的ASCⅡ码值为13，当keyCode值为13时，使用JavaScript正则表达式取出当前当input标签中id索引值，从而拼出下一个待获得焦点的input标签的id，接着使用document.getElementById()找到该标签并调用自身的focus()方法使其获得焦点。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> inputs.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	inputs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">onkeyup</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		event <span style="color: #339933;">=</span> event <span style="color: #339933;">||</span> window.<span style="color: #660066;">event</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">keyCode</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">13</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> next <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'i'</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">id</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\d+/</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>next<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				next.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>但是这时候点击回车表单依旧会提交。可以这么处理：将submit改成button，然后监听onclick通过JavaScript提交表单。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript变量作用域回顾" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1191%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/09/8089851.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量作用域回顾</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript闭包" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1205%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript闭包</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="javascript对象模型" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F381%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">javascript对象模型</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数作用域链" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1200%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数作用域链</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript绘制笑脸" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/07/11304948.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript绘制笑脸</font>
                    </a>
                </td>
        </tr>
        <br/>
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">来自无觅网络的相关文章：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Unobtrusive JavaScript in ASP.NET MVC 3" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2010%2F11%2Funobtrusive-javascript%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/13/7796162.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Unobtrusive JavaScript in ASP.NET MVC 3 (@dozer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="rails3.1.3 Could not find a JavaScript runtime. error" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fyoumeiyou.info%2Farticles%2Ferror-could-not-find-a-javascript-runtime&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">rails3.1.3 Could not find a JavaScript runtime. error (@youmeiyou)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用JavaScript制作弹出式窗口" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.dlxp.net%2F80.html&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/09/02/22348673.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用JavaScript制作弹出式窗口 (@dlxp)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="disabled 和 readonly 总结" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2012%2F01%2Fdisabled-and-readonly-summary%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/16/17631436.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">disabled 和 readonly 总结 (@dozer)</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="那些 WebForm 可以从 MVC 借鉴的东西 —— Ajax" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.dozer.cc%2F2011%2F12%2Fwebform-take-example-by-mvc-ajax%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1261%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/07/13/8175060.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">那些 WebForm 可以从 MVC 借鉴的东西 —— Ajax (@dozer)</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ineeke.com/archives/1261/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Java模拟腾讯微博的网页登录失败</title>
		<link>http://www.ineeke.com/archives/1256/</link>
		<comments>http://www.ineeke.com/archives/1256/#comments</comments>
		<pubDate>Wed, 23 Jun 2010 13:43:10 +0000</pubDate>
		<dc:creator>Neeke</dc:creator>
				<category><![CDATA[Java技术]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.ineeke.com/archives/java-simulation-of-micro-bos-homepage-tencent-login-failed/</guid>
		<description><![CDATA[想模拟腾讯微博的网页登录呢，结果没成功，暂时还没找到原因，我觉得应该没问题了啊，记录下来，等有空了继续折腾。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Java中的垃圾回收器如何工作的" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1243%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/06/7745388.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Java中的垃圾回收器如何工作的</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Java模拟腾讯微博的网页登录成功" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1257%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Java模拟腾讯微博的网页登录成功</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="犯傻了 关于Java中的equals" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1253%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">犯傻了 关于Java中的equals</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Java构造函数中调用构造函数" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1240%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/06/7745388.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Java构造函数中调用构造函数</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript闭包" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1205%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript闭包</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>想模拟腾讯微博的网页登录呢，结果没成功，暂时还没找到原因，我觉得应该没问题了啊，记录下来，等有空了继续折腾。<span id="more-1256"></span><br />
腾讯微博登录页面在这里：http://ui.ptlogin2.qq.com/login_weibo.html<br />
<span style="color: #ff0000;">已成功，可以选择继续阅读，或查看[<a href="http://www.ineeke.com/archives/java-simulation-of-micro-bos-homepage-tencent-login-success/" target="_blank">Java模拟腾讯微博的网页登录成功</a>]</span>。<br />
通过分析得到如下信息：<br />
主要JS文件：</p>
<blockquote><p>http://ui.ptlogin2.qq.com/login_t.js</p></blockquote>
<p>验证码获取地址：</p>
<blockquote><p>http://ptlogin2.qq.com/check?uin=9920317&#038;appid=46000101&#038;r=0.2535580481721431</p></blockquote>
<p>在登录页载入的时候这个请求被发送，这个返回的是一个JavaScript，类似这么个格式：</p>
<blockquote><p>ptui_checkVC(&#8217;0&#8242;,&#8217;!Y2D&#8217;)</p></blockquote>
<p>在页面上通过eval()执行，将第二个参数（验证码）赋给表单的隐藏域。<br />
登录时的请求：</p>
<blockquote><p>http://ptlogin2.qq.com/login?u=9920317&#038;p=33FB075FEFD31C2BBD38E3D1CD71491D&#038;verifycode=!Y2D&#038;aid=46000101&#038;u1=http://t.qq.com&#038;h=1&#038;from_ui=1&#038;fp=loginerroralert</p></blockquote>
<p>通过测试发现登录时的参数p的值（MD5加密后的密码）每次都不一样，刚开始有点纳闷，假设数据库里面存的是33FB075FEFD31C2BBD38E3D1CD71491D，而我登录的时候发送的是33FB075FEFD31C2BBD38E3D1CD71491A或者33FB075FEFD31C2BBD38E3D1CD71491E，他这是怎么判断密码是否一致的？后来分析了login_t.js，其实腾讯的这个登录与之前我做过的[<a href="http://www.ineeke.com/archives/alipay-interface-development/" target="_blank">支付宝接口开发</a>]和[<a href="http://www.ineeke.com/archives/alipay-interface-development-coldfusion-edition/" target="_blank">支付宝接口开发（ColdFusion版）</a>]是同一个道理。<br />
从login_t.js中可以找到如下代码：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> f <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
f <span style="color: #339933;">+=</span> e.<span style="color: #660066;">verifycode</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
f <span style="color: #339933;">=</span> f.<span style="color: #660066;">toUpperCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
b <span style="color: #339933;">+=</span> md5<span style="color: #009900;">&#40;</span>md5_3<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">p</span>.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> f<span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>先将输入的原始密码A通过md5_3()加密得到字符串B，接着将验证码追加到B之后得到C，再用md5()加密C得到D。原始密码当然是不变的，而验证码每次都不一样（当然也有几率一样），这就是为什么每次发送的MD5值都不一样的原因了。<br />
从登录的请求中可以找到verifycode这个参数，打眼一看就知道是验证码啦，从客户端将上面得到的D与verifycode都发送到服务器端，服务器端通过u值（QQ号）查出上面的密码B，然后在服务器端对B+verifycode进行md5求值，将结果与发送过来的D进行比较，一致则登录成功，反之失败。（这些都是结合支付宝那个猜的）<br />
其它参数基本上都是死值，除了获取验证码时传递的那个随机数r。<br />
都分析清楚了，我就用Java开工了，写了下面这么个类（因为是瞎捣鼓，所以没考虑什么规范）：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
</pre></td><td class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> QQ <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> md5<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> p<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">return</span> hex_md5<span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> md5_3<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> p<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">int</span> s<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	    s <span style="color: #339933;">=</span> core_md5<span style="color: #009900;">&#40;</span>str2binl<span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span>, p.<span style="color: #006633;">length</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    s <span style="color: #339933;">=</span> core_md5<span style="color: #009900;">&#40;</span>s, <span style="color: #cc66cc;">16</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    s <span style="color: #339933;">=</span> core_md5<span style="color: #009900;">&#40;</span>s, <span style="color: #cc66cc;">16</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    <span style="color: #000000; font-weight: bold;">return</span> binl2hex<span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> hex_md5<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> p<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #000000; font-weight: bold;">return</span> binl2hex<span style="color: #009900;">&#40;</span>core_md5<span style="color: #009900;">&#40;</span>str2binl<span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span>, p.<span style="color: #006633;">length</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> core_md5<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> s, <span style="color: #000066; font-weight: bold;">int</span> k<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		s<span style="color: #009900;">&#91;</span>k <span style="color: #339933;">&gt;&gt;</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">|=</span> <span style="color: #cc66cc;">128</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #009900;">&#40;</span>k <span style="color: #339933;">%</span> <span style="color: #cc66cc;">32</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		s<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>k <span style="color: #339933;">+</span> <span style="color: #cc66cc;">64</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;&gt;&gt;</span> <span style="color: #cc66cc;">9</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">14</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> k<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">int</span> o <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1732584193</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">int</span> n <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">271733879</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">int</span> m <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">1732584194</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">int</span> l <span style="color: #339933;">=</span> <span style="color: #cc66cc;">271733878</span><span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> g <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> g <span style="color: #339933;">&lt;</span> s.<span style="color: #006633;">length</span><span style="color: #339933;">;</span> g <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">16</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	        <span style="color: #000066; font-weight: bold;">int</span> j <span style="color: #339933;">=</span> o<span style="color: #339933;">;</span>
	        <span style="color: #000066; font-weight: bold;">int</span> h <span style="color: #339933;">=</span> n<span style="color: #339933;">;</span>
	        <span style="color: #000066; font-weight: bold;">int</span> f <span style="color: #339933;">=</span> m<span style="color: #339933;">;</span>
	        <span style="color: #000066; font-weight: bold;">int</span> e <span style="color: #339933;">=</span> l<span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">7</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">680876936</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">12</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">389564586</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">17</span>, <span style="color: #cc66cc;">606105819</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">22</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1044525330</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">7</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">176418897</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">12</span>, <span style="color: #cc66cc;">1200080426</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">17</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1473231341</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">7</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">22</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">45705983</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">7</span>, <span style="color: #cc66cc;">1770035416</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">9</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">12</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1958414417</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">10</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">17</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">42063</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">11</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">22</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1990404162</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">12</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">7</span>, <span style="color: #cc66cc;">1804603682</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">13</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">12</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">40341101</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">14</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">17</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1502002290</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ff<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">15</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">22</span>, <span style="color: #cc66cc;">1236535329</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">5</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">165796510</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">9</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1069501632</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">11</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">14</span>, <span style="color: #cc66cc;">643717713</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">20</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">373897302</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">5</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">701558691</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">10</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">9</span>, <span style="color: #cc66cc;">38016083</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">15</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">14</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">660478335</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">20</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">405537848</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">9</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">5</span>, <span style="color: #cc66cc;">568446438</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">14</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">9</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1019803690</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">14</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">187363961</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">20</span>, <span style="color: #cc66cc;">1163531501</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">13</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">5</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1444681467</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">9</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">51403784</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">7</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">14</span>, <span style="color: #cc66cc;">1735328473</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_gg<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">12</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">20</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1926607734</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">378558</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">11</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">2022574463</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">11</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">16</span>, <span style="color: #cc66cc;">1839030562</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">14</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">23</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">35309556</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1530992060</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">11</span>, <span style="color: #cc66cc;">1272893353</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">7</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">16</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">155497632</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">10</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">23</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1094730640</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">13</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #cc66cc;">681279174</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">11</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">358537222</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">16</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">722521979</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">23</span>, <span style="color: #cc66cc;">76029189</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">9</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">640364487</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">12</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">11</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">421815835</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">15</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">16</span>, <span style="color: #cc66cc;">530742520</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_hh<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">23</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">995338651</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">6</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">198630844</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">7</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">10</span>, <span style="color: #cc66cc;">1126891415</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">14</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">15</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1416354905</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">21</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">57434055</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">12</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">6</span>, <span style="color: #cc66cc;">1700485571</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">10</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1894986606</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">10</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">15</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1051523</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">21</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">2054922799</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">6</span>, <span style="color: #cc66cc;">1873313359</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">15</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">10</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">30611744</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">15</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1560198380</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">13</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">21</span>, <span style="color: #cc66cc;">1309151649</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>o, n, m, l, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">6</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">145523070</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>l, o, n, m, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">11</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">10</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">1120210379</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>m, l, o, n, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">15</span>, <span style="color: #cc66cc;">718787259</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> md5_ii<span style="color: #009900;">&#40;</span>n, m, l, o, s<span style="color: #009900;">&#91;</span>g <span style="color: #339933;">+</span> <span style="color: #cc66cc;">9</span><span style="color: #009900;">&#93;</span>, <span style="color: #cc66cc;">21</span>, <span style="color: #339933;">-</span><span style="color: #cc66cc;">343485551</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        o <span style="color: #339933;">=</span> safe_add<span style="color: #009900;">&#40;</span>o, j<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        n <span style="color: #339933;">=</span> safe_add<span style="color: #009900;">&#40;</span>n, h<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        m <span style="color: #339933;">=</span> safe_add<span style="color: #009900;">&#40;</span>m, f<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	        l <span style="color: #339933;">=</span> safe_add<span style="color: #009900;">&#40;</span>l, e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    <span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> rs <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">16</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		rs<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> o<span style="color: #339933;">;</span>
		rs<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> n<span style="color: #339933;">;</span>
		rs<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> m<span style="color: #339933;">;</span>
		rs<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> l<span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">return</span> rs<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> str2binl<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> p<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> s <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">16</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">int</span> a <span style="color: #339933;">=</span> <span style="color: #cc66cc;">254</span><span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> p.<span style="color: #006633;">length</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">;</span> i <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			s<span style="color: #009900;">&#91;</span> i <span style="color: #339933;">&gt;&gt;</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">|=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>p.<span style="color: #006633;">charAt</span><span style="color: #009900;">&#40;</span>i <span style="color: #339933;">/</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span> a <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">%</span> <span style="color: #cc66cc;">32</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000000; font-weight: bold;">return</span> s<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000066; font-weight: bold;">void</span> main<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> args<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		QQ q <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> QQ<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> verifyURL <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;http://ptlogin2.qq.com/check?uin=9920317&amp;appid=46000101&amp;r=0.37908964480776913&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> loginURL <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;http://ptlogin2.qq.com/login?&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> redirectURL <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> cookie <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> qqn <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;9920317&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> md5Pass <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> verifyCode <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003399;">HttpURLConnection</span> urlConn <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #003399;">HttpURLConnection</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">URL</span><span style="color: #009900;">&#40;</span>verifyURL<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">openConnection</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setDoOutput</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setDoInput</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setUseCaches</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setAllowUserInteraction</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setRequestMethod</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;GET&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">connect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> cookie1 <span style="color: #339933;">=</span> urlConn.<span style="color: #006633;">getHeaderField</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Set-Cookie&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">BufferedReader</span> br <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">BufferedReader</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">InputStreamReader</span><span style="color: #009900;">&#40;</span>urlConn.<span style="color: #006633;">getInputStream</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">StringBuffer</span> sb <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">StringBuffer</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span> str <span style="color: #339933;">=</span> br.<span style="color: #006633;">readLine</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">while</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">null</span> <span style="color: #339933;">!=</span> str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			sb.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			str <span style="color: #339933;">=</span> br.<span style="color: #006633;">readLine</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		br.<span style="color: #006633;">close</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">disconnect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		verifyCode <span style="color: #339933;">=</span> sb.<span style="color: #006633;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">18</span>, sb.<span style="color: #006633;">length</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		loginURL <span style="color: #339933;">+=</span> <span style="color: #0000ff;">&quot;u=9920317&amp;p=&quot;</span><span style="color: #339933;">;</span>
		loginURL <span style="color: #339933;">+=</span> qq.<span style="color: #006633;">md5</span><span style="color: #009900;">&#40;</span>qq.<span style="color: #006633;">md5_3</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> verifyCode.<span style="color: #006633;">toUpperCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		loginURL <span style="color: #339933;">+=</span> <span style="color: #0000ff;">&quot;&amp;verifycode=&quot;</span><span style="color: #339933;">+</span>verifyCode.<span style="color: #006633;">toUpperCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #0000ff;">&quot;&amp;aid=46000101&amp;u1=http%3A%2F%2Ft.qq.com&amp;h=1&amp;from_ui=1&amp;fp=loginerroralert&quot;</span><span style="color: #339933;">;</span>
		urlConn <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #003399;">HttpURLConnection</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">URL</span><span style="color: #009900;">&#40;</span>loginURL<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">openConnection</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setDoOutput</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setDoInput</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setUseCaches</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setAllowUserInteraction</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">setRequestProperty</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Cookie&quot;</span>, cookie1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">connect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003399;">String</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> setCookies <span style="color: #339933;">=</span> urlConn.<span style="color: #006633;">getHeaderFields</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">get</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Set-Cookie&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003399;">String</span> cookie2 <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
		cookie2 <span style="color: #339933;">+=</span> setCookies<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">30</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		cookie2 <span style="color: #339933;">+=</span> setCookies<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">27</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		cookie2 <span style="color: #339933;">+=</span> setCookies<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">24</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		cookie2 <span style="color: #339933;">+=</span> setCookies<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		cookie2 <span style="color: #339933;">=</span> cookie2.<span style="color: #006633;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">','</span>, <span style="color: #0000ff;">';'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		cookie2 <span style="color: #339933;">=</span> cookie2.<span style="color: #006633;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">2</span>, cookie2.<span style="color: #006633;">length</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		out.<span style="color: #006633;">print</span><span style="color: #009900;">&#40;</span>cookie2 <span style="color: #339933;">+</span> <span style="color: #0000ff;">&quot;&lt;hr /&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		br <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">BufferedReader</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">InputStreamReader</span><span style="color: #009900;">&#40;</span>urlConn.<span style="color: #006633;">getInputStream</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;;</span>
		str <span style="color: #339933;">=</span> br.<span style="color: #006633;">readLine</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		sb <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">StringBuffer</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">while</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">null</span> <span style="color: #339933;">!=</span> str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			sb.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			str <span style="color: #339933;">=</span> br.<span style="color: #006633;">readLine</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		br.<span style="color: #006633;">close</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		urlConn.<span style="color: #006633;">disconnect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span> md5_cmn<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> h, <span style="color: #000066; font-weight: bold;">int</span> e, <span style="color: #000066; font-weight: bold;">int</span> d, <span style="color: #000066; font-weight: bold;">int</span> c, <span style="color: #000066; font-weight: bold;">int</span> g, <span style="color: #000066; font-weight: bold;">int</span> f<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">return</span> safe_add<span style="color: #009900;">&#40;</span>bit_rol<span style="color: #009900;">&#40;</span>safe_add<span style="color: #009900;">&#40;</span>safe_add<span style="color: #009900;">&#40;</span>e, h<span style="color: #009900;">&#41;</span>, safe_add<span style="color: #009900;">&#40;</span>c, f<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>, g<span style="color: #009900;">&#41;</span>, d<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span> md5_ff<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> g, <span style="color: #000066; font-weight: bold;">int</span> f, <span style="color: #000066; font-weight: bold;">int</span> k, <span style="color: #000066; font-weight: bold;">int</span> j, <span style="color: #000066; font-weight: bold;">int</span> e, <span style="color: #000066; font-weight: bold;">int</span> i, <span style="color: #000066; font-weight: bold;">int</span> h<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #000000; font-weight: bold;">return</span> md5_cmn<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>f <span style="color: #339933;">&amp;</span> k<span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>~f<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span> j<span style="color: #009900;">&#41;</span>, g, f, e, i, h<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span> md5_gg<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> g, <span style="color: #000066; font-weight: bold;">int</span> f, <span style="color: #000066; font-weight: bold;">int</span> k, <span style="color: #000066; font-weight: bold;">int</span> j, <span style="color: #000066; font-weight: bold;">int</span> e, <span style="color: #000066; font-weight: bold;">int</span> i, <span style="color: #000066; font-weight: bold;">int</span> h<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #000000; font-weight: bold;">return</span> md5_cmn<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>f <span style="color: #339933;">&amp;</span> j<span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>k <span style="color: #339933;">&amp;</span> <span style="color: #009900;">&#40;</span>~j<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>, g, f, e, i, h<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span> md5_hh<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> g, <span style="color: #000066; font-weight: bold;">int</span> f, <span style="color: #000066; font-weight: bold;">int</span> k, <span style="color: #000066; font-weight: bold;">int</span> j, <span style="color: #000066; font-weight: bold;">int</span> e, <span style="color: #000066; font-weight: bold;">int</span> i, <span style="color: #000066; font-weight: bold;">int</span> h<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #000000; font-weight: bold;">return</span> md5_cmn<span style="color: #009900;">&#40;</span>f <span style="color: #339933;">^</span> k <span style="color: #339933;">^</span> j, g, f, e, i, h<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span> md5_ii<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> g, <span style="color: #000066; font-weight: bold;">int</span> f, <span style="color: #000066; font-weight: bold;">int</span> k, <span style="color: #000066; font-weight: bold;">int</span> j, <span style="color: #000066; font-weight: bold;">int</span> e, <span style="color: #000066; font-weight: bold;">int</span> i, <span style="color: #000066; font-weight: bold;">int</span> h<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #000000; font-weight: bold;">return</span> md5_cmn<span style="color: #009900;">&#40;</span>k <span style="color: #339933;">^</span> <span style="color: #009900;">&#40;</span>f <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>~j<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>, g, f, e, i, h<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span> safe_add<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> a, <span style="color: #000066; font-weight: bold;">int</span> d<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">int</span> c <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>a <span style="color: #339933;">&amp;</span> <span style="color: #cc66cc;">65535</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>d <span style="color: #339933;">&amp;</span> <span style="color: #cc66cc;">65535</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">int</span> b <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>a <span style="color: #339933;">&gt;&gt;</span> <span style="color: #cc66cc;">16</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>d <span style="color: #339933;">&gt;&gt;</span> <span style="color: #cc66cc;">16</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&gt;&gt;</span> <span style="color: #cc66cc;">16</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>b <span style="color: #339933;">&lt;&lt;</span> <span style="color: #cc66cc;">16</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&amp;</span> <span style="color: #cc66cc;">65535</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">int</span> bit_rol<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> a, <span style="color: #000066; font-weight: bold;">int</span> b<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>a <span style="color: #339933;">&lt;&lt;</span> b<span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>a <span style="color: #339933;">&gt;&gt;&gt;</span> <span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">32</span> <span style="color: #339933;">-</span> b<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> binl2hex<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #003399;">String</span> b <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;0123456789ABCDEF&quot;</span><span style="color: #339933;">;</span>
	    <span style="color: #003399;">String</span> d <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
	    <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> a <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> a <span style="color: #339933;">&lt;</span>c.<span style="color: #006633;">length</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">4</span><span style="color: #339933;">;</span> a<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    	<span style="color: #000066; font-weight: bold;">char</span> x <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">char</span><span style="color: #009900;">&#41;</span>b.<span style="color: #006633;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#91;</span>a <span style="color: #339933;">&gt;&gt;</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&gt;&gt;</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>a <span style="color: #339933;">%</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">8</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span> <span style="color: #cc66cc;">15</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    	<span style="color: #000066; font-weight: bold;">char</span> y <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">char</span><span style="color: #009900;">&#41;</span>b.<span style="color: #006633;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#91;</span>a <span style="color: #339933;">&gt;&gt;</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&gt;&gt;</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>a <span style="color: #339933;">%</span> <span style="color: #cc66cc;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span> <span style="color: #cc66cc;">15</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    	d <span style="color: #339933;">+=</span> x<span style="color: #339933;">;</span>
	    	d <span style="color: #339933;">+=</span> y<span style="color: #339933;">;</span>
	    <span style="color: #009900;">&#125;</span>
	    <span style="color: #000000; font-weight: bold;">return</span> d.<span style="color: #006633;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">32</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>跑了几次都返回的是：</p>
<blockquote><p>ptuiCB(&#8217;7&#8242;,&#8217;0&#8242;,”,&#8217;0&#8242;);</p></blockquote>
<p>提示：您的输入有误, 请重试。<br />
而按理来说返回的应该是：</p>
<blockquote><p>ptuiCB(&#8217;0&#8242;,&#8217;0&#8242;,&#8217;http://t.qq.com&#8217;,&#8217;0&#8242;);</p></blockquote>
<p>密码错误则是：</p>
<blockquote><p>ptuiCB(&#8217;3&#8242;,&#8217;0&#8242;,”,&#8217;0&#8242;);</p></blockquote>
<p>用同样的参数在我写的和官方JavaScript产生的请求地址是一模一样的，可就是不成功。<br />
目前想到的两点：<br />
1.我使用了两次HttpURLConnection，Session不一致。<br />
2.服务器上对Referer进行了验证。</p>
<p>虽说没成功，但是也学到了不少，NND，光这个login_t.js里面的算法就够学的了 n:-gg 。<br />
发现一个有意思的地方：在login_t.js的str2binl函数中有如下一行代码（chrsz是个常数8，我的代码中直接写的8）：</p>
<blockquote><p>c[b>>5] |= (d.charCodeAt(b / chrsz) &#038; a) << (b % 32)</p></blockquote>
<p> 而我用Java语言来写这个方法时必须得写成这样： </p>
<blockquote><p>s[i>> 5] |= ((p.charAt(i / 8)) &#038; a + 1) << (i % 32);</p></blockquote>
<p>不然结果就不一致。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Java中的垃圾回收器如何工作的" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1243%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/06/7745388.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Java中的垃圾回收器如何工作的</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Java模拟腾讯微博的网页登录成功" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1257%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Java模拟腾讯微博的网页登录成功</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="犯傻了 关于Java中的equals" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1253%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">犯傻了 关于Java中的equals</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Java构造函数中调用构造函数" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1240%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/06/7745388.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Java构造函数中调用构造函数</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript闭包" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1205%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1256%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript闭包</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ineeke.com/archives/1256/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>JavaScript动态时钟</title>
		<link>http://www.ineeke.com/archives/1224/</link>
		<comments>http://www.ineeke.com/archives/1224/#comments</comments>
		<pubDate>Mon, 26 Apr 2010 04:43:25 +0000</pubDate>
		<dc:creator>Neeke</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://www.ineeke.com/archives/javascript-dynamic-clock/</guid>
		<description><![CDATA[继续玩JavaScript CanvasRenderingContext2D。前面画出来的都是“死”的，下面结合前面两个例子做一个“动”态时钟。当然还是得先了解一下即将用到的一些新属性及方法。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript绘制笑脸" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/07/11304948.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript绘制笑脸</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript CanvasRenderingContext2D在canvas上绘图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1220%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript CanvasRenderingContext2D在canvas上绘图</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript变量作用域回顾" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1191%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/09/8089851.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量作用域回顾</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript原始数据类型包装对象" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1184%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript原始数据类型包装对象</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数属性和方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1197%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数属性和方法</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p><div id="attachment_1223" class="wp-caption alignright" style="width: 127px"><a href="http://www.ineeke.com/wp-content/uploads/2010/04/JavaScript-dynamic-clock.png"><img class="size-full wp-image-1223" title="JavaScript dynamic clock" src="http://www.ineeke.com/wp-content/uploads/2010/04/JavaScript-dynamic-clock.png" alt="JavaScript dynamic clock" width="117" height="117" /></a><p class="wp-caption-text">JavaScript dynamic clock</p></div><br />
继续玩JavaScript CanvasRenderingContext2D。前面画出来的都是“死”的，下面结合前面两个例子做一个“动”态时钟。当然还是得先了解一下即将用到的一些新属性及方法。<span id="more-1224"></span><br />
<strong>方法</strong><br />
save()：<br />
将当前图形信息存储在栈中。</p>
<p>restore()：<br />
从栈中取出图形信息并应用。</p>
<p>clearRect(float x, float y, float width, float height)：<br />
清空指定区域的图像并透明化。</p>
<p>translate(float dx, float dy)：<br />
为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。</p>
<p>scale(float sx, float sy)：<br />
横纵缩放。</p>
<p>rotate(angle)：<br />
旋转，angle为弧度数。</p>
<p>lineTo(float x, float y)：<br />
指定线条终点坐标。</p>
<p>fill()：<br />
填充图形。</p>
<p><strong>属性</strong></p>
<p>lineWidth：<br />
线条宽度</p>
<p>lineCap：<br />
指定线段如何结束。只有绘制较宽线段时，它才有效。这个属性的合法值如下表所示。默认值是：”butt”。<br />
“butt” 	这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交，这条线段在其端点之外没有扩展。<br />
“round” 	这个值指定了线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。<br />
“square” 	这个值表示线段应该带有一个矩形线帽。这个值和 “butt” 一样，但是线段扩展了自己的宽度的一半。<br />
其它方法及属性可参见<a href="http://www.ineeke.com/archives/scripted-drawing-by-canvasrenderingcontext2d-createradialgradient/" target="_blank">JavaScript CanvasRenderingContext2D在canvas上绘图</a>及<a href="http://www.ineeke.com/archives/draw-a-smile-face-with-javascript/" target="_blank">JavaScript绘制笑脸</a>。<br />
下面给出代码：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> clock<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> now <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> ctx <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'clock'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getContext</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'2d'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//保存状态，将当前状态压栈</span>
	ctx.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//清理图像</span>
	ctx.<span style="color: #660066;">clearRect</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">150</span><span style="color: #339933;">,</span><span style="color: #CC0000;">150</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//已(75, 75)为原点，将图像复制</span>
	ctx.<span style="color: #660066;">translate</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">75</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">75</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//横纵比</span>
	ctx.<span style="color: #660066;">scale</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0.5</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0.5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//逆转90°</span>
	ctx.<span style="color: #660066;">rotate</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//设置线条颜色</span>
	ctx.<span style="color: #660066;">strokeStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;black&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//设置填充颜色</span>
	ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;white&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//设置线条宽度</span>
	ctx.<span style="color: #660066;">lineWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">8</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//设置线边角为圆角</span>
	ctx.<span style="color: #660066;">lineCap</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;round&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//保存状态，将当前状态压栈</span>
	ctx.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//画出12个时刻</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span><span style="color: #CC0000;">12</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//以当前原点为圆心</span>
		ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//旋转30°</span>
		ctx.<span style="color: #660066;">rotate</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//以圆心外100像素处为起点，120像素处为终点画线</span>
		ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">120</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//画出这条路线</span>
		ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #006600; font-style: italic;">//出栈，将取出的状态作为当前状态</span>
	ctx.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//再将状态压栈，保存起来</span>
	ctx.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//设置线条宽度</span>
	ctx.<span style="color: #660066;">lineWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//画出60个分钟</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span><span style="color: #CC0000;">60</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//因为时针就是每五分钟的点了，所以跳过不画了</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>i<span style="color: #339933;">%</span>5<span style="color: #339933;">!=</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		  ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">117</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">120</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #006600; font-style: italic;">//旋转6°</span>
		ctx.<span style="color: #660066;">rotate</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">30</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #006600; font-style: italic;">//出栈，将取出的状态作为当前状态</span>
	ctx.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//取出当前秒</span>
	<span style="color: #003366; font-weight: bold;">var</span> sec <span style="color: #339933;">=</span> now.<span style="color: #660066;">getSeconds</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//取出当前分</span>
	<span style="color: #003366; font-weight: bold;">var</span> min <span style="color: #339933;">=</span> now.<span style="color: #660066;">getMinutes</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//取出当前时</span>
	<span style="color: #003366; font-weight: bold;">var</span> hr  <span style="color: #339933;">=</span> now.<span style="color: #660066;">getHours</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//判断是否是24小时计时法，是则减12</span>
	hr <span style="color: #339933;">=</span> hr<span style="color: #339933;">&gt;=</span><span style="color: #CC0000;">12</span> <span style="color: #339933;">?</span> hr<span style="color: #339933;">-</span><span style="color: #CC0000;">12</span> <span style="color: #339933;">:</span> hr<span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//再将状态压栈，保存起来</span>
	ctx.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// 画出时针</span>
	<span style="color: #006600; font-style: italic;">//时针转向当前位置</span>
	ctx.<span style="color: #660066;">rotate</span><span style="color: #009900;">&#40;</span> hr<span style="color: #339933;">*</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">360</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>min <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">21600</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>sec <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//设置时针宽度</span>
	ctx.<span style="color: #660066;">lineWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">14</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//以当前原点为圆心</span>
	ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//反向延长20个像素</span>
	ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">20</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">80</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//画线</span>
	ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//画分针</span>
	ctx.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">rotate</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">30</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>min <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">1800</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>sec <span style="color: #009900;">&#41;</span>
	ctx.<span style="color: #660066;">lineWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">strokeStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'blue'</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">28</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">112</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//画秒针</span>
	ctx.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">rotate</span><span style="color: #009900;">&#40;</span>sec <span style="color: #339933;">*</span> Math.<span style="color: #660066;">PI</span><span style="color: #339933;">/</span><span style="color: #CC0000;">30</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">strokeStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;red&quot;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;red&quot;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">lineWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">6</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">30</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">120</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">fill</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">90</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;black&quot;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">fill</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//加一个表盘</span>
	ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">lineWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">14</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">strokeStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'gray'</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">142</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	ctx.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>在浏览器里面看看吧 n:-wx ！咦！为什么没有动呢？这可不是GIF图片啊！怎么动呢？</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> initClock<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	clock<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	setInterval<span style="color: #009900;">&#40;</span>clock<span style="color: #339933;">,</span><span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>再加一段如上代码进去，然后调用initClock()方法，现在再看看，动了吧。其实每次看到的都是一张静止的图片，只是每隔一秒将当前的时间以钟表的样子画上去而已。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript绘制笑脸" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/06/07/11304948.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript绘制笑脸</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript CanvasRenderingContext2D在canvas上绘图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1220%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript CanvasRenderingContext2D在canvas上绘图</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript变量作用域回顾" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1191%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/09/8089851.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量作用域回顾</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript原始数据类型包装对象" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1184%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript原始数据类型包装对象</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数属性和方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1197%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数属性和方法</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ineeke.com/archives/1224/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScript绘制笑脸</title>
		<link>http://www.ineeke.com/archives/1222/</link>
		<comments>http://www.ineeke.com/archives/1222/#comments</comments>
		<pubDate>Fri, 23 Apr 2010 02:18:31 +0000</pubDate>
		<dc:creator>Neeke</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://www.ineeke.com/archives/draw-a-smile-face-with-javascript/</guid>
		<description><![CDATA[可别看这张脸简单啊，你要知道这里面可是用了平面几何中的圆啊！（π值你能背到第几位？）所以必须得知道圆的定义：1.平面上到定点的距离等于定长的点的集合叫圆,2.平面上一条线段，绕它的一端旋转360°，留下的轨迹叫圆，另外还得知道坐标系以及CanvasRenderingContext2D提供的方法。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript动态时钟" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/06/7752177.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript动态时钟</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript变量与对象属性" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1187%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量与对象属性</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数属性和方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1197%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数属性和方法</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数作用域链" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1200%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数作用域链</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript原始数据类型包装对象" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1184%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript原始数据类型包装对象</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p><div id="attachment_1221" class="wp-caption alignright" style="width: 125px"><a href="http://www.ineeke.com/wp-content/uploads/2010/04/smile_face.png"><img class="size-full wp-image-1221" title="smile face" src="http://www.ineeke.com/wp-content/uploads/2010/04/smile_face.png" alt="smile face" width="115" height="113" /></a><p class="wp-caption-text">smile face</p></div><br />
可别看这张脸简单啊，你要知道这里面可是用了平面几何中的圆啊！（π值你能背到第几位？）所以必须得知道圆的定义：1.平面上到定点的距离等于定长的点的集合叫圆,2.平面上一条线段，绕它的一端旋转360°，留下的轨迹叫圆，另外还得知道坐标系以及CanvasRenderingContext2D提供的方法。<span id="more-1222"></span><br />
以下是将要用到的几个CanvasRenderingContext2D的方法及属性：<br />
<strong>方法﻿</strong></p>
<ol>
<li>beginPath()
<ul>
<li>清除任何已定义的路径并创建一个新的路径。当canvas的context被第一次创建时，该方法将自动被调用并设置当坐标点为(0, 0)。</li>
</ul>
</li>
<li>moveTo(float x, float y)
<ul>
<li>该方法将画笔移动到(x, y)并以此为起点开启一条子路径。如果再此之前已经存在了一个子路径，且该路径中只存在一个点，那么这个路径将被删除。</li>
</ul>
</li>
<li>arc(float x, float y, float radius, float startAngle, endAngle,boolean counterclockwise)
<ul>
<li>x,y
<ul>
<li>圆心坐标</li>
</ul>
</li>
<li>radius
<ul>
<li>半径</li>
</ul>
</li>
<li>startAngle,endAngle
<ul>
<li>弧度</li>
</ul>
</li>
<li>counterclockwise
<ul>
<li>true为逆时针，false为顺时针</li>
</ul>
</li>
</ul>
</li>
<li>stroke()
<ul>
<li>画出当前路径的几何图形，其视觉效果依靠strokeStyle，lineWidth,，lineCap,，lineJoin及miterLimit 属性。</li>
</ul>
</li>
</ol>
<p><strong>属性</strong></p>
<ol>
<li>strokeStyle
<ul>
<li>设置几何图形的颜色</li>
</ul>
</li>
</ol>
<p>这个圆不简单吧，需要这么多知识，不过应该不是很难吧。下面给出代码：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> canvas <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'canvas'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">getContext</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'2d'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//注意：默认起始坐标（0, 0）位置在左上角</span>
ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//设置图形为红色</span>
ctx.<span style="color: #660066;">strokeStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'red'</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//以（75, 75）点为圆心，50为半径，弧度数为0到2π（360°），逆时针画圆</span>
ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">75</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">75</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">50</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//画笔移动至（110, 75）</span>
ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">110</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">75</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//因为嘴巴是个半圆，所以弧度数是0到π，嘴巴长在下面而不是上面，所以顺时针画</span>
ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">75</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">75</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">35</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> Math.<span style="color: #660066;">PI</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">65</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">65</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//画出左眼</span>
ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">60</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">65</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">95</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">65</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//画出右眼</span>
ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">90</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">65</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//这时候你在浏览器上是什么也看不到的，必须调用下面的方法才能够看到</span>
ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="JavaScript动态时钟" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1224%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/06/7752177.png" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript动态时钟</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript变量与对象属性" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1187%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript变量与对象属性</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数属性和方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1197%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数属性和方法</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript函数作用域链" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1200%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript函数作用域链</font>
                    </a>
                </td>
                <td width="101" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JavaScript原始数据类型包装对象" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1184%2F&from=http%3A%2F%2Fwww.ineeke.com%2Farchives%2F1222%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 95px !important; height: 95px !important;" src="http://static.wumii.com/site_images/2011/05/12/8529867.bmp" width="95px" height="95px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 101px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JavaScript原始数据类型包装对象</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ineeke.com/archives/1222/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

