<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>完美生活 - Javascript/Ajax</title><link>http://blog.hnce.net/</link><description>专注于网站技术与网络营销的博客 - </description><generator>RainbowSoft Studio Z-Blog 1.8 Arwen Build 81206</generator><language>zh-CN</language><copyright>Copyright 2005 - 2009, 完美生活(专注于网站技术与网络营销的博客). Some Rights Reserved. </copyright><pubDate>Thu, 09 Sep 2010 09:45:18 +0800</pubDate><item><title>Ajax自动完成功能实例</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/242.html</link><pubDate>Sun, 02 Apr 2006 21:37:00 +0800</pubDate><guid>http://blog.hnce.net/post/242.html</guid><description><![CDATA[<br /><br /><span class="top11">&nbsp;<br/><p>&nbsp;</p><p>自动完成的功能即Autocomplete,具体的例子可以在这里看： <a href="http://www.b2c-battery.co.uk/">http://www.b2c-battery.co.uk</a></p><p>在Search框内输入一个产品型号，就可以看见效果了。 </p><p>这里用到了一个开源的代码： AutoAssist ，有兴趣的可以看一下。 </p><p>以下为代码片断： </p><table cellspacing="0" bordercolordark="#ffffff" cellpadding="2" width="400" align="center" bordercolorlight="#000000" border="1">    <tbody>        <tr>            <td class="code" bgcolor="#e6e6e6">            <pre>index.htm <br /><br />＜script type=&quot;text/javascript&quot; src=&quot;javascripts/prototype.js&quot;&gt;＜/script&gt; <br /><br />＜script type=&quot;text/javascript&quot; src=&quot;javascripts/autoassist.js&quot;&gt;＜/script&gt; <br /><br />＜link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles/autoassist.css&quot;/&gt; <br /><br />＜div&gt; <br /><br />＜input type=&quot;text&quot; name=&quot;keyword&quot; id=&quot;keyword&quot;/&gt; <br /><br />＜script type=&quot;text/javascript&quot;&gt; <br /><br />Event.observe(window, &quot;load&quot;, function() { <br /><br />var aa = new AutoAssist(&quot;keyword&quot;, function() { <br /><br />return &quot;forCSV.php?q=&quot; + this.txtBox.value; <br /><br />}); <br /><br />}); <br /><br />＜/script&gt; <br /><br />＜/div&gt; </pre>            </td>        </tr>    </tbody></table><p>不知道为什么不能用keywords做文本框的名字，我试了很久，后来还是用keyword,搞得还要修改原代码。 </p><table cellspacing="0" bordercolordark="#ffffff" cellpadding="2" width="400" align="center" bordercolorlight="#000000" border="1">    <tbody>        <tr>            <td class="code" bgcolor="#e6e6e6">            <pre>forCSV.php<br /><br />＜?php <br /><br />$keyword = $_GET[&#39;q&#39;]; <br /><br />$count = 0; <br /><br />$handle = fopen(&quot;products.csv&quot;, &quot;r&quot;); <br /><br />while (($data = fgetcsv($handle, 1000)) !== FALSE) { <br /><br />if (preg_match(&quot;/$keyword/i&quot;, $data[0])) { <br /><br />if ($count++ &gt; 10) { break; } <br /><br />?&gt; <br /><br />＜div onSelect=&quot;this.txtBox.value=&#39;＜?php echo $data[0]; ?&gt;&#39;;&quot;&gt; <br /><br />＜?php echo $data[0]; ?&gt; <br /><br />＜/div&gt; <br /><br />＜?php <br /><br />} <br /><br />} <br /><br />fclose($handle); <br /><br />if ($count == 0) { <br /><br />?&gt; <br /><br />: (, nothing found. <br /><br />＜?php <br /><br />} <br /><br />?&gt; </pre>            </td>        </tr>    </tbody></table><p>原来的例子中的CSV文件是根据\t来分隔的，我们也可以用空格或其它的来分隔，这取决于你的数据结构。 </p><p>当然你也可以不读文件，改从数据库里读资料，就不再废话了。 </p><p>效果图如下： </p><p align="center"><img height="300" src="/UserFiles/Image/0920540.jpg" width="400" border="0" alt="" /><a href="HTTP://blog.hnce.net/UserFiles/Image/20064221422755190.jpg"></a></p></span>]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/242.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=242</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=242&amp;key=0c8afdd5</trackback:ping></item><item><title>java script读取xml</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/241.html</link><pubDate>Fri, 31 Mar 2006 00:58:00 +0800</pubDate><guid>http://blog.hnce.net/post/241.html</guid><description><![CDATA[<br /><br />/**<br />&nbsp;* 得到XML文件属性的集合对象<br />&nbsp;* @param xmlDoc XML对象<br />&nbsp;* @param name 属性名称 如: user<br />&nbsp;* @return 返回 Array 对象<br />&nbsp;* Example XML:<br />&nbsp;* &lt;?xml version=&#39;1.0&#39; encoding=&#39;utf-8&#39;?&gt;<br />&nbsp;* &lt;ekuy&gt;<br />&nbsp;*&nbsp;&nbsp; &lt;user&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp; &lt;name&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;cnname&gt;小猪&lt;/cnname&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp; &lt;/name&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp; &lt;age&gt;27&lt;/age&gt;<br />&nbsp;*&nbsp;&nbsp; &lt;/user&gt;<br />&nbsp;*&nbsp;&nbsp; &lt;user&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp; &lt;name&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;cnname&gt;小霞&lt;/cnname&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp; &lt;/name&gt;<br />&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp; &lt;age&gt;26&lt;/age&gt;<br />&nbsp;*&nbsp;&nbsp; &lt;/user&gt;<br />&nbsp;* &lt;/ekuy&gt;<br />&nbsp;*/<br />function getXMLArray(xmlDoc, name) {<br />&nbsp; var keys = name.split(&#39;.&#39;);<br />&nbsp; var node = xmlDoc.documentElement;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 得到根节点<br />&nbsp; var rtn = new Array();<br />&nbsp; var n = 0;<br /><br/><div>&nbsp; for(var i=0; i&lt;keys.length; i++) {<br />&nbsp;&nbsp;&nbsp; var childs = node.childNodes;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 得到子节点<br />&nbsp;&nbsp;&nbsp; var key = keys[i];<br />&nbsp;for(var k=0; k&lt;childs.length; k++) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp; var child = childs[k];<br />&nbsp;&nbsp; if(child.nodeName == key) {&nbsp;&nbsp;&nbsp;&nbsp; // 判断子节点是否符合<br />&nbsp;&nbsp;if(i == keys.length-1) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rtn[n] = child;<br />&nbsp;&nbsp;&nbsp; n++;<br />&nbsp;&nbsp;} else {<br />&nbsp;&nbsp;&nbsp; node = child;<br />&nbsp;&nbsp;&nbsp; break;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp; }<br />&nbsp;}<br />&nbsp; }</div><br /><br/><div>&nbsp; return rtn;<br />}</div><br /><br/><div>/**<br />&nbsp;* 得到由getXMLArray函数得到对象中的值<br />&nbsp;* @param node 节点对象<br />&nbsp;* @param name <br />&nbsp;* @return 返回 String <br />&nbsp;*/<br />function getValue(node, name) {<br />&nbsp; var keys = name.split(&#39;.&#39;);<br />&nbsp; <br />&nbsp; for(var i=0; i&lt;keys.length; i++) {<br />&nbsp;&nbsp;&nbsp; var childs = node.childNodes;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 得到子节点<br />&nbsp;&nbsp;&nbsp; var key = keys[i];<br />&nbsp;for(var k=0; k&lt;childs.length; k++) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp; var child = childs[k];<br />&nbsp;&nbsp; if(child.nodeName == key) {&nbsp;&nbsp;&nbsp;&nbsp; // 判断子节点是否符合<br />&nbsp;&nbsp;if(child.childNodes.length == 1) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; // 如果没有字节点,返回值<br />&nbsp;&nbsp;&nbsp; return child.text;<br />&nbsp;&nbsp;} else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; // 还有子节点,继续分析<br />&nbsp;&nbsp;&nbsp; node = child;<br />&nbsp;&nbsp;&nbsp; break;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp; }<br />&nbsp;}<br />&nbsp; }</div><br /><br/><div>&nbsp; return &quot;&quot;;<br />}<br /></div><br /><br/><div>// 测试:</div><br /><br/><div>var xmlDoc = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;);<br />xmlDoc.async = false;<br />xmlDoc.loadXML(&quot;&lt;?xml version=&#39;1.0&#39; encoding=&#39;utf-8&#39;?&gt;&lt;ekuy&gt;&lt;user&gt;&lt;name&gt;&lt;cnname&gt;小猪&lt;/cnname&gt;&lt;/name&gt;&lt;age&gt;27&lt;/age&gt;&lt;/user&gt;&lt;user&gt;&lt;name&gt;&lt;cnname&gt;小霞&lt;/cnname&gt;&lt;/name&gt;&lt;age&gt;26&lt;/age&gt;&lt;/user&gt;&lt;user&gt;&lt;name&gt;&lt;cnname&gt;小章&lt;/cnname&gt;&lt;/name&gt;&lt;age&gt;25&lt;/age&gt;&lt;/user&gt;&lt;/ekuy&gt;&quot;);</div><br /><br/><div>var list = getXMLArray(xmlDoc, &#39;user&#39;);<br />for(var i=0; i&lt;list.length; i++) {<br />&nbsp; var obj = list[i];<br />&nbsp; document.write(getValue(obj, &#39;name.cnname&#39;));<br />&nbsp; document.write(getValue(obj, &#39;age&#39;));<br />&nbsp; document.write(&#39;&lt;br\/&gt;&#39;);<br />}</div><br /><br/><div>&nbsp;</div><br /><br/><div>打印出:</div><br /><br/><div>小猪27<br />小霞26<br />小章25</div>]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/241.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=241</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=241&amp;key=5f568bda</trackback:ping></item><item><title>经常用到的javaScript技术代码</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/230.html</link><pubDate>Sun, 26 Feb 2006 10:27:00 +0800</pubDate><guid>http://blog.hnce.net/post/230.html</guid><description><![CDATA[<br /><br />一、验证类<br />1、数字验证内<br />1.1 整数<br />1.2 大于0的整数 （用于传来的ID的验证)<br />1.3 负整数的验证<br />1.4 整数不能大于iMax<br />1.5 整数不能小于iMin<br />2、时间类<br />2.1 短时间，形如 (13:04:06)<br />2.2 短日期，形如 (2003-12-05)<br />2.3 长时间，形如 (2003-12-05 13:04:06)<br />2.4 只有年和月。形如(2003-05,或者2003-5)<br />2.5 只有小时和分钟,形如(12:03)<br />3、表单类<br />3.1 所有的表单的值都不能为空<br />3.2 多行文本框的值不能为空。<br />3.3 多行文本框的值不能超过sMaxStrleng<br />3.4 多行文本框的值不能少于sMixStrleng<br />3.5 判断单选框是否选择。<br />3.6 判断复选框是否选择.<br />3.7 复选框的全选，多选，全不选，反选<br />3.8 文件上传过程中判断文件类型<br />4、字符类<br />4.1 判断字符全部由a-Z或者是A-Z的字字母组成<br />4.2 判断字符由字母和数字组成。<br />4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母<br />4.4 字符串替换函数.Replace();<br />5、浏览器类<br />5.1 判断浏览器的类型<br />5.2 判断ie的版本<br />5.3 判断客户端的分辨率<br/><p>6、结合类<br />6.1 email的判断。<br />6.2 手机号码的验证<br />6.3 身份证的验证</p><p><br />二、功能类</p><p>1、时间与相关控件类<br />1.1 日历<br />1.2 时间控件<br />1.3 万年历<br />1.4 显示动态显示时钟效果（文本，如OA中时间）<br />1.5 显示动态显示时钟效果 (图像，像手表) <br />2、表单类<br />2.1 自动生成表单<br />2.2 动态添加，修改，删除下拉框中的元素<br />2.3 可以输入内容的下拉框<br />2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字（多用于短信发送)</p><p>3、打印类<br />3.1 打印控件<br />4、事件类<br />4.1 屏蔽右键<br />4.2 屏蔽所有功能键<br />4.3 --&gt; 和&lt;-- F5 F11,F9,F1<br />4.4 屏蔽组合键ctrl+N<br />5、网页设计类<br />5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现）<br />5.2 html编辑控件类<br />5.3 颜色选取框控件<br />5.4 下拉菜单<br />5.5 两层或多层次的下拉菜单<br />5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目)<br />5.7 状态栏，title栏的动态效果（例子很多，可以研究一下）<br />5.8 双击后，网页自动滚屏<br />6、树型结构。<br />6.1 asp+SQL版<br />6.2 asp+xml+sql版<br />6.3 java+sql或者java+sql+xml<br />7、无边框效果的制作<br />8、连动下拉框技术<br />9、文本排序<br />---------------------------------------------------------------------------------------</p><p>一、验证类<br />1、数字验证内<br />1.1 整数<br />/^(-|\+)?\d+$/.test(str)<br />1.2 大于0的整数 （用于传来的ID的验证)<br />/^\d+$/.test(str)<br />1.3 负整数的验证<br />/^-\d+$/.test(str)<br />2、时间类<br />2.1 短时间，形如 (13:04:06)<br />function isTime(str)<br />{<br />var a = str.match(/^(\d{1,2})(?(\d{1,2})\2(\d{1,2})$/);<br />if (a == null) {alert(&#39;输入的参数不是时间格式&#39;); return false;}<br />if (a[1]&gt;24 || a[3]&gt;60 || a[4]&gt;60)<br />{<br />alert(&quot;时间格式不对&quot;);<br />return false<br />}<br />return true;<br />}<br />2.2 短日期，形如 (2003-12-05)<br />function strDateTime(str)<br />{<br />var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); <br />if(r==null)return false; <br />var d= new Date(r[1], r[3]-1, r[4]); <br />return (d.getFullYear()==r[1]&amp;&amp;(d.getMonth()+1)==r[3]&amp;&amp;d.getDate()==r[4]);<br />}<br />2.3 长时间，形如 (2003-12-05 13:04:06)<br />function strDateTime(str)<br />{<br />var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2})\d{1,2})\d{1,2})$/; <br />var r = str.match(reg); <br />if(r==null)return false; <br />var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]); <br />return (d.getFullYear()==r[1]&amp;&amp;(d.getMonth()+1)==r[3]&amp;&amp;d.getDate()==r[4]&amp;&amp;d.getHours()==r[5]&amp;&amp;d.getMinutes()==r[6]&amp;&amp;d.getSeconds()==r[7]);<br />}<br />2.4 只有年和月。形如(2003-05,或者2003-5)<br />2.5 只有小时和分钟,形如(12:03)<br />3、表单类<br />3.1 所有的表单的值都不能为空</p><p>3.2 多行文本框的值不能为空。<br />3.3 多行文本框的值不能超过sMaxStrleng<br />3.4 多行文本框的值不能少于sMixStrleng<br />3.5 判断单选框是否选择。<br />3.6 判断复选框是否选择.<br />3.7 复选框的全选，多选，全不选，反选<br />3.8 文件上传过程中判断文件类型<br />4、字符类<br />4.1 判断字符全部由a-Z或者是A-Z的字字母组成</p><p>4.2 判断字符由字母和数字组成。</p><p>4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母<br />/^([a-zA-z_]{1})([\w]*)$/g.test(str)<br />4.4 字符串替换函数.Replace();<br />5、浏览器类<br />5.1 判断浏览器的类型<br />window.navigator.appName<br />5.2 判断ie的版本<br />window.navigator.appVersion<br />5.3 判断客户端的分辨率<br />window.screen.height; window.screen.width;</p><p>6、结合类<br />6.1 email的判断。<br />function ismail(mail)<br />{<br />return(new RegExp(/^\w+((-\w+)|(\.\w+))*\-AT-[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));<br />}<br />6.2 手机号码的验证<br />6.3 身份证的验证<br />function isIdCardNo(num)<br />{<br />if (isNaN(num)) {alert(&quot;输入的不是数字！&quot;); return false;}<br />var len = num.length, re; <br />if (len == 15)<br />re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);<br />else if (len == 18)<br />re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);<br />else {alert(&quot;输入的数字位数不对！&quot;); return false;}<br />var a = num.match(re);<br />if (a != null)<br />{<br />if (len==15)<br />{<br />var D = new Date(&quot;19&quot;+a[3]+&quot;/&quot;+a[4]+&quot;/&quot;+a[5]);<br />var B = D.getYear()==a[3]&amp;&amp;(D.getMonth()+1)==a[4]&amp;&amp;D.getDate()==a[5];<br />}<br />else<br />{<br />var D = new Date(a[3]+&quot;/&quot;+a[4]+&quot;/&quot;+a[5]);<br />var B = D.getFullYear()==a[3]&amp;&amp;(D.getMonth()+1)==a[4]&amp;&amp;D.getDate()==a[5];<br />}<br />if (!B) {alert(&quot;输入的身份证号 &quot;+ a[0] +&quot; 里出生日期不对！&quot;); return false;}<br />}<br />return true;<br />}<br />-------------------------------------------------------------------------------------</p><p>3.7 复选框的全选，多选，全不选，反选</p><p>全选</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p><br />全选</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>function checkAll(str)<br />{<br />var a = document.getElementsByName(str);<br />var n = a.length;<br />for (var i=0; ia[i].checked = window.event.srcElement.checked;<br />}<br />function checkItem(str)<br />{<br />var e = window.event.srcElement;<br />var all = eval(&quot;document.hrong.&quot;+ str);<br />if (e.checked)<br />{<br />var a = document.getElementsByName(e.name);<br />all.checked = true;<br />for (var i=0; i{<br />if (!a[i].checked){ all.checked = false; break;}<br />}<br />}<br />else all.checked = false;<br />}</p><p><br />3.8 文件上传过程中判断文件类型</p><p><br />-------------------------------------------------------------------------------------<br />１．身份证严格验证：</p><p>&nbsp;</p><p>２．验证ＩＰ地址</p><p>function isip(s){<br />var check=function(v){try{return (v&lt;=255 &amp;&amp; v&gt;=0)}catch(x){return false}};<br />var re=s.split(&quot;.&quot;)<br />return (re.length==4)?(check(re[0]) &amp;&amp; check(re[1]) &amp;&amp; check(re[2]) &amp;&amp; check(re[3])):false<br />}</p><p>var s=&quot;202.197.78.129&quot;;<br />alert(isip(s))</p><p>&nbsp;</p><p>３．加sp1后还能用的无边框窗口！！</p><p>&nbsp;</p><p>&nbsp;</p><p><br />/*--- Special Thanks For andot ---*/</p><p>/*<br />This following code are designed and writen by Windy_sk <br />You can use it freely, but u must held all the copyright items!<br />/</p><p>/- Thanks For andot Again ---*/</p><p>var CW_width = 400;<br />var CW_height = 300;<br />var CW_top = 100;<br />var CW_left = 100;<br />var CW_url = &quot;/&quot;;<br />var New_CW = window.createPopup();<br />var CW_Body = New_CW.document.body;<br />var content = &quot;&quot;;<br />var CSStext = &quot;margin:1px;color:black; border:2px outset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle=&#39;outset&#39;}, onmousedown=function(){if(event.button!=2)this.style.borderStyle=&#39;inset&#39;});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;&quot;;</p><p>//Build Window<br />include.startDownload(CW_url, function(source){content=source});</p><p>function insert_content(){<br />var temp = &quot;&quot;;<br />CW_Body.style.overflow = &quot;hidden&quot;;<br />CW_Body.style.backgroundColor = &quot;white&quot;;<br />CW_Body.style.border = &quot;solid black 1px&quot;;<br />content = content.replace(/]*)&gt;/g,&quot;&quot;);<br />temp += &quot;&quot;;<br />temp += &quot;&quot;;<br />temp += &quot;Chromeless Window For IE6 SP1&quot;;<br />temp += &quot;&quot;;<br />temp += &quot;?&quot;;<br />temp += &quot;0&quot;;<br />temp += &quot;1&quot;;<br />temp += &quot;x&quot;;<br />temp += &quot;&quot;;<br />temp += &quot;&quot;;<br />temp += content;<br />temp += &quot;</p><p>&quot;;<br />temp += &quot;&quot;;<br />CW_Body.innerHTML = temp;<br />}</p><p>setTimeout(&quot;insert_content()&quot;,1000);</p><p>var if_max = true;<br />function show_CW(){<br />window.moveTo(10000, 10000);<br />if(if_max){<br />New_CW.show(CW_top, CW_left, CW_width, CW_height);<br />if(typeof(New_CW.document.all.include)!=&quot;undefined&quot;){<br />New_CW.document.all.include.style.width = CW_width;<br />New_CW.document.all.Max.innerText = &quot;1&quot;;<br />}</p><p>}else{<br />New_CW.show(0, 0, screen.width, screen.height);<br />New_CW.document.all.include.style.width = screen.width;<br />}<br />}</p><p>window.onfocus = show_CW;<br />window.onresize = show_CW;</p><p>// Move Window<br />var drag_x,drag_y,draging=false</p><p>function drag_move(e){<br />if (draging){<br />New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);<br />return false;<br />}<br />}</p><p>function drag_down(e){<br />if(e.button==2)return;<br />if(New_CW.document.body.offsetWidth==screen.width &amp;&amp; New_CW.document.body.offsetHeight==screen.height)return;<br />drag_x=e.clientX;<br />drag_y=e.clientY;<br />draging=true;<br />e.srcElement.setCapture();<br />}</p><p>function drag_up(e){<br />draging=false;<br />e.srcElement.releaseCapture();<br />if(New_CW.document.body.offsetWidth==screen.width &amp;&amp; New_CW.document.body.offsetHeight==screen.height) return;<br />CW_top = e.screenX-drag_x;<br />CW_left = e.screenY-drag_y;<br />}</p><p><br />&nbsp;<br />电话号码的验证</p><p>要求：<br />　　(1)电话号码由数字、&quot;(&quot;、&quot;)&quot;和&quot;-&quot;构成<br />　　(2)电话号码为3到8位<br />　　(3)如果电话号码中包含有区号，那么区号为三位或四位<br />　　(4)区号用&quot;(&quot;、&quot;)&quot;或&quot;-&quot;和其他部分隔开<br />　　(5)移动电话号码为11或12位，如果为12位,那么第一位为0<br />　　(6)11位移动电话号码的第一位和第二位为&quot;13&quot;<br />　　(7)12位移动电话号码的第二位和第三位为&quot;13&quot;<br />　　根据这几条规则，可以与出以下正则表达式：<br />　　(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)</p><p>&nbsp;</p><p>function PhoneCheck(s) {<br />var str=s;<br />var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/<br />alert(reg.test(str));<br />}</p><p>&nbsp;</p><p>--------------------------------------------------------------------------------------</p><p><br />---------------------------------------------------------------------------------</p><p>//检验法人代码<br />function isCorporationCode(s){<br />var patrn=/^(\d){15}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验登录名：只能输入5-20个以字母开头、可带数字、&ldquo;_&rdquo;、&ldquo;.&rdquo;的字串<br />function isRegisterUserName(s)<br />{<br />var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9._]){4,19}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}<br />//校验用户姓名：只能输入1-30个以字母开头的字串<br />function isTrueName(s)<br />{<br />var patrn=/^[^`~!@#$%^&amp;*()+-=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;/? 0-9]{2,19}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验密码：只能输入6-15个字母、数字<br />function isPasswd(s)<br />{<br />var patrn=/^[a-zA-Z0-9]{6,15}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//检验体重<br />function isAvoirdupois(s)<br />{<br />var patrn=/^[1-9]{1}[0-9]{0,2}$/;<br />var patrn2=/^[1-9]{1}$/;<br />var intPart=s.indexOf(&#39;.&#39;);<br />var decPart=s.lastIndexOf(&#39;.&#39;);<br />if (intPart==-1 &amp;&amp; patrn.exec(s) &amp;&amp; eval(s)&gt;=2 &amp;&amp; eval(s)&lt;=200) return true<br />if (intPart!=decPart || intPart==0 || intPart+2!=s.length) return false<br />if (!patrn.exec(s.substring(0,intPart)) || !patrn2.exec(s.substring(decPart+1))) return false<br />if (eval(s)&lt;2 || eval(s)&gt;200) return false<br />return true<br />}</p><p>//校验普通电话、传真号码：可以&ldquo;+&rdquo;开头，除数字外，可含有&ldquo;-&rdquo;<br />function isTel(s)<br />{<br />var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验手机号码：必须以数字开头，除数字外，可含有&ldquo;-&rdquo;<br />function isMobile(s)<br />{<br />var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验地区代码<br />function isAreaCode(s)<br />{<br />var patrn=/^(\d){6}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验邮政编码<br />function isPostalCode(s)<br />{<br />var patrn=/^[1-9]{1}(\d){5}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验搜索关键字<br />function isSearch(s)<br />{<br />var patrn=/^[^`~!@#$%^&amp;*()+=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;/? ]{1}[^`~!@$%^&amp;()+=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;?]{0,19}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验是否为ip地址<br />function isIP(s)<br />{<br />var patrn=/^[0-9.]{1,20}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//检验页码是否正确<br />function isPage(s)<br />{<br />var patrn=/^[1-9]{1}[0-9]{0,2}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//表单输入值错误提示<br />function vErr(o,s){<br />alert(s);<br />if (o) o.focus();<br />return false;<br />}</p><p>//判断单选<br />function chkRadio(o){<br />for (i=0;iif (o[i].checked) return true;<br />}<br />return false;<br />} <br />//====================================表单类================================<br />// 文件上传过程中判断文件类型<br />/*</p><p>/</p><p>//表单的值不能为空<br />function isNull(elem){<br />//var pattern=/^\s+|\s+$/;<br />if(elem.replace(/(^\s+|\s$)/g, &quot;&quot;)==&quot;&quot;){<br />return false;<br />}else{<br />return true;<br />}<br />}<br />//不能超过imax字符<br />function imax(elem){<br />if(elem.length&gt;imax){<br />return false;<br />}else{<br />return true;<br />}<br />}<br />//不能少于imix字符<br />function imix(elem){<br />if(elem.lengthreturn false;<br />}else{<br />return true;<br />}<br />}<br />//输入为中文判断<br />function isChinese(elem){<br />var pattern=/[^\x00-\xff]/g;<br />if(pattern.test(elem)){<br />//包含中文<br />return false;<br />}else{<br />//不包含中文<br />return true;<br />}<br />}</p><p>/ *********************************************************************************************************************</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>.cMenu {<br />FILTER: alpha(opacity=0);BACKGROUND-COLOR: #D6D3CE;BORDER-BOTTOM: #666666 2px solid; BORDER-LEFT: #E4E4E4 2px solid; BORDER-RIGHT: #666666 2px solid; BORDER-TOP: #E4E4E4 2px solid; COLOR: #000000; CURSOR: default; FONT-SIZE: 9pt; color:#000000;FONT-WEIGHT: normal; LINE-HEIGHT: 20px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 110px<br />}<br />.menuitems {<br />font-size:9pt;<br />MARGIN: 2px;<br />PADDING-BOTTOM: 0px;<br />PADDING-LEFT: 15px;<br />PADDING-RIGHT: 3px;<br />PADDING-TOP: 0px;<br />}</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&lt;!--[if IE]&gt;<br />onmouseover=highlightie5()&gt;</p><p>电话号码的验证</p><p>要求：<br />　　(1)电话号码由数字、&quot;(&quot;、&quot;)&quot;和&quot;-&quot;构成<br />　　(2)电话号码为3到8位<br />　　(3)如果电话号码中包含有区号，那么区号为三位或四位<br />　　(4)区号用&quot;(&quot;、&quot;)&quot;或&quot;-&quot;和其他部分隔开<br />　　(5)移动电话号码为11或12位，如果为12位,那么第一位为0<br />　　(6)11位移动电话号码的第一位和第二位为&quot;13&quot;<br />　　(7)12位移动电话号码的第二位和第三位为&quot;13&quot;<br />　　根据这几条规则，可以与出以下正则表达式：<br />　　(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)</p><p><br />&lt;script language=&quot;javascript&quot;&gt;<br />function PhoneCheck(s) {<br />var str=s;<br />var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/<br />alert(reg.test(str));<br />}<br />&lt;/script&gt;<br />&lt;input type=text name=&quot;iphone&quot;&gt;<br />&lt;input type=button onclick=&quot;PhoneCheck(document.all.iphone.value)&quot; value=&quot;Check&quot;&gt;<br />----------------------------------------------------------------------------------------</p><p>&lt;%<br />&#39;********************************************<br />&#39;函数功能：正则表达式校验<br />&#39;参数patrn：要校验的类型<br />&#39; &quot;User&quot; - 用户名<br />&#39; &quot;Truename&quot; - 英文姓名<br />&#39; &quot;Passwd&quot; - 密码<br />&#39; &quot;Tel&quot; - 电话/传真<br />&#39; &quot;Mobil&quot; - 手机<br />&#39; &quot;Date&quot; - 日期（格式：yyyy-mm-dd）<br />&#39; &quot;Email&quot; - 电子邮件<br />&#39; &quot;Postalcode&quot; - 邮政编码<br />&#39; &quot;Search&quot; - 搜索关键字<br />&#39; &quot;Int&quot; - 整数<br />&#39;参数strng：要校验的字串<br />&#39;返回值：校验结果，正确返回true，错误返回false<br />&#39;********************************************<br />Function IsVerify(patrn,strng)<br />strng=Trim(strng)<br />Select Case patrn<br />Case &quot;User&quot; &#39;用户名<br />patrn=&quot;^[a-z]{1}([a-z0-9]|[._]){2,19}$&quot;<br />Case &quot;Truename&quot; &#39;英文姓名<br />patrn=&quot;^[a-zA-Z]{1,30}$&quot;<br />Case &quot;Passwd&quot; &#39;密码<br />patrn=&quot;^(\w){6,20}$&quot;<br />Case &quot;Tel&quot; &#39;电话/传真<br />patrn=&quot;^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$&quot;<br />Case &quot;Mobil&quot; &#39;手机<br />patrn=&quot;^(\d)+[-]?(\d){6,12}$&quot;<br />Case &quot;Date&quot; &#39;日期（格式：yyyy-mm-dd）<br />patrn=&quot;^[12]{1}(\d){3}[-][01]?(\d){1}[-][0123]?(\d){1}$&quot;<br />Case &quot;Email&quot; &#39;电子邮件<br />patrn=&quot;^((\w)|[-]|[.])+@(((\w)|[-])+[.])+[a-z]{2,4}$&quot;<br />Case &quot;Postalcode&quot; &#39;邮政编码<br />patrn=&quot;^[a-z0-9 ]{3,12}$&quot;<br />Case &quot;Search&quot; &#39;搜索关键字<br />patrn=&quot;^[^`~!@#$%^&amp;*()+=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;/?]{1}[^`~!@$%^&amp;()+=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;?]{0,19}$&quot;<br />Case &quot;Int&quot; &#39;整数<br />patrn=&quot;^[1-9]{1}[0-9]{0,6}$&quot;<br />Case &quot;Array&quot;<br />patrn=&quot;^[0-9]{1}([0-9]|[\,]){0,150}$&quot;<br />End Select<br />Dim regEx<br />Dim Match<br />Set regEx = New RegExp<br />regEx.Pattern = patrn<br />regEx.IgnoreCase = True<br />regEx.Global = True<br />Matches = regEx.test(strng)<br />IsVerify = Matches<br />Set regEx = Nothing<br />End Function</p><p>&#39;********************************************<br />&#39;函数功能：对输入框的特殊字串进行过滤保存<br />&#39;参数strPass：过滤前的字符串<br />&#39;返回值：过滤后的字符串<br />&#39;********************************************<br />Function SQLencode(byVal strPass)<br />strPass = Replace(strPass, &quot;&amp;&quot;, &quot;&amp;&quot;)<br />strPass = Replace(strPass, &quot;&lt;&quot;, &quot;&lt;&quot;)<br />strPass = Replace(strPass, &quot;&gt;&quot;, &quot;&gt;&quot;)<br />strPass = Replace(strPass, &quot;&quot;&quot;&quot;, &quot;&quot;&quot;)<br />strPass = Replace(strPass, &quot;&#39;&quot;, &quot;&#39;&quot;)<br />strPass = Replace(strPass, &quot; &quot;, &quot;　&quot;)<br />strPass = Replace(strPass,chr(13)&amp;chr(10),&quot;&lt;br/&gt;&quot;)<br />SQLencode = strPass<br />End Function</p><p>&#39;********************************************<br />&#39;函数功能：对SQLencode函数过滤后的字符串进行还原<br />&#39;参数strPass：经过过滤后的字符串<br />&#39;返回值：还原的过滤前的字符串<br />&#39;********************************************<br />Function SQLdecode(byVal strPass)<br />If Not isNull(strPass) Then<br />strPass = Replace(strPass, &quot;&lt;&quot;, &quot;&lt;&quot;)<br />strPass = Replace(strPass, &quot;&gt;&quot;, &quot;&gt;&quot;)<br />strPass = Replace(strPass, &quot;&quot;&quot;,&quot;&quot;&quot;&quot; )<br />strPass = Replace(strPass, &quot;&#39;&quot;,&quot;&#39;&quot; )<br />strPass = Replace(strPass,&quot;&lt;br/&gt;&quot;,chr(13)&amp;chr(10))<br />End If<br />SQLdecode = strPass<br />End Function</p><p>&#39;********************************************<br />&#39;函数功能：生成随机密码（字符为数字与大小写字母集合）<br />&#39;参数length：密码长度<br />&#39;返回值：随机密码<br />&#39;********************************************<br />Function random(length)<br />Dim n,str<br />rnds=&quot;&quot;<br />Randomize<br />For i=1 To length<br />n=Int(75*Rnd+48)<br />If (n&gt;57 and n&lt;65) Or (n&gt;90 and n&lt;97) Then<br />i=i-1<br />Else<br />rnds=rnds&amp;Chr(n)<br />End If<br />Next<br />random=rnds<br />End Function</p><p>&#39;********************************************<br />&#39;函数功能：对密码进行加密/解密（最大长度为15位）<br />&#39;********************************************<br />Function Encrypt(preString)<br />Dim pwds,s<br />pwds=&quot;&quot;<br />s=Left(preString,15)<br />For i=1 To Len(s)<br />seed=170-Asc(Mid(s,i,1))-i<br />pwds=pwds &amp; Chr(seed)<br />Next<br />Encrypt=pwds<br />End Function</p><p>&#39;********************************************<br />&#39;函数功能：格式化当前时间字串<br />&#39;参数：无<br />&#39;返回值：返回当前时间的纯数字字符串方式的表示（例如：当前时间2001-10-3 2:34:6，返回字符串&quot;20011003023406&quot;）<br />&#39;********************************************<br />Function TheDate()<br />y=year(date())<br />m=month(date())<br />d=day(date())<br />h=Hour(time())<br />n=Minute(time())<br />s=Second(time())<br />If Len(m)=1 Then m=&quot;0&quot;&amp;m<br />If Len(d)=1 Then d=&quot;0&quot;&amp;d<br />If Len(h)=1 Then h=&quot;0&quot;&amp;h<br />If Len(n)=1 Then n=&quot;0&quot;&amp;n<br />If Len(s)=1 Then s=&quot;0&quot;&amp;s<br />thedate=y&amp;m&amp;d&amp;h&amp;n&amp;s<br />End Function</p><p>&#39;********************************************<br />&#39;函数功能：返回字符串的长度<br />&#39;参数：字符串<br />&#39;返回值：字符串长度<br />&#39;********************************************<br />Function strLen(str)<br />dim p_len<br />p_len=0<br />strlen=0<br />if trim(str)&lt;&gt;&quot;&quot; then<br />p_len=len(trim(str))<br />for xx=1 to p_len<br />if asc(mid(str,xx,1))&lt;0 then<br />strlen=int(strlen) + 2<br />else<br />strlen=int(strlen) + 1<br />end if<br />next<br />end if<br />End Function</p><p>&#39;********************************************<br />&#39;函数功能：发送邮件通知<br />&#39;参数：字符串<br />&#39;返回值：成功/失败<br />&#39;********************************************<br />Function SendMail(ToAddress, Subject, Body)<br />On Error Resume Next<br />Set objMail = Server.CreateObject(&quot;JMail.Message&quot;)<br />objMail.From = ADR_Email<br />objMail.FromName = &quot;ADR管理中心&quot;<br />objMail.Subject = Subject<br />objMail.AddRecipient ToAddress<br />objMail.Body = Body<br />If objMail.Send(&quot;&quot;) Then<br />SendMail = True<br />Else<br />SendMail = False<br />End If<br />If Err.Number&lt;&gt; 0 Then SendMail = False<br />Set objMail = Nothing<br />On Error Goto 0<br />End Function<br />%&gt;<br />-----------------------------------------------------------------------------------</p><p>//检验法人代码<br />function isCorporationCode(s){<br />var patrn=/^(\d){15}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验登录名：只能输入5-20个以字母开头、可带数字、&ldquo;_&rdquo;、&ldquo;.&rdquo;的字串<br />function isRegisterUserName(s)<br />{<br />var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9._]){4,19}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}<br />//校验用户姓名：只能输入1-30个以字母开头的字串<br />function isTrueName(s)<br />{<br />var patrn=/^[^`~!@#$%^&amp;*()+-=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;/? 0-9]{2,19}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验密码：只能输入6-15个字母、数字<br />function isPasswd(s)<br />{<br />var patrn=/^[a-zA-Z0-9]{6,15}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//检验体重<br />function isAvoirdupois(s)<br />{<br />var patrn=/^[1-9]{1}[0-9]{0,2}$/;<br />var patrn2=/^[1-9]{1}$/;<br />var intPart=s.indexOf(&#39;.&#39;);<br />var decPart=s.lastIndexOf(&#39;.&#39;);<br />if (intPart==-1 &amp;&amp; patrn.exec(s) &amp;&amp; eval(s)&gt;=2 &amp;&amp; eval(s)&lt;=200) return true<br />if (intPart!=decPart || intPart==0 || intPart+2!=s.length) return false<br />if (!patrn.exec(s.substring(0,intPart)) || !patrn2.exec(s.substring(decPart+1))) return false<br />if (eval(s)&lt;2 || eval(s)&gt;200) return false<br />return true<br />}</p><p>//校验普通电话、传真号码：可以&ldquo;+&rdquo;开头，除数字外，可含有&ldquo;-&rdquo;<br />function isTel(s)<br />{<br />var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验手机号码：必须以数字开头，除数字外，可含有&ldquo;-&rdquo;<br />function isMobile(s)<br />{<br />var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验地区代码<br />function isAreaCode(s)<br />{<br />var patrn=/^(\d){6}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验邮政编码<br />function isPostalCode(s)<br />{<br />var patrn=/^[1-9]{1}(\d){5}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验搜索关键字<br />function isSearch(s)<br />{<br />var patrn=/^[^`~!@#$%^&amp;*()+=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;/? ]{1}[^`~!@$%^&amp;()+=|\\\[\]\{\}:;\&#39;\,.&lt;&gt;?]{0,19}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//校验是否为ip地址<br />function isIP(s)<br />{<br />var patrn=/^[0-9.]{1,20}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//检验页码是否正确<br />function isPage(s)<br />{<br />var patrn=/^[1-9]{1}[0-9]{0,2}$/;<br />if (!patrn.exec(s)) return false<br />return true<br />}</p><p>//表单输入值错误提示<br />function vErr(o,s){<br />alert(s);<br />if (o) o.focus();<br />return false;<br />}</p><p>//判断单选<br />function chkRadio(o){<br />for (i=0;i&lt;o.length;i++){<br />if (o[i].checked) return true;<br />}<br />return false;<br />} </p>]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/230.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=230</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=230&amp;key=a0b9b093</trackback:ping></item><item><title>点击表头排序的几种方法</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/228.html</link><pubDate>Sat, 25 Feb 2006 19:23:00 +0800</pubDate><guid>http://blog.hnce.net/post/228.html</guid><description><![CDATA[<br /><br />我记得老早老早大家就开始在经典讨论表格排序的问题了，过了这么多年，这个问题的解决方案层出不穷，见仁见智。<br />用script，htc,xml+xsl等等怎么着都能实现，只是效率不同罢了。<br />今天正好学习.net的时候学到这一块，顺道把以前和大家讨论过的知识整理回顾并总结一下。<br /><br /><br />1， CSS+HTC(HTML Component)<br />微软的这个方法简单，在经典里面也火了一阵，下载Dave Massy做好了的组件，只需要在表格的style里面加入behavior:url(xxx.htc);就可以了.<br />不过这个方法有个缺点就是需要服务器端运行，在硬盘里直接运行是不管用的。而且需要IE5以后的浏览器，不支持FF等其他的。<br />演示：<a href="http://msdn.microsoft.com/library/en-us/dndude/html/Qual.asp" target="_blank">http://msdn.microsoft.com/library/en-us/dndude/html/Qual.asp</a><br />官方地址：<br /><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude07232001.asp" target="_blank">http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude07232001.asp</a><br /><br />2，script法<br />这算是目前用得比较多的一种方法了。像<a href="http://bt1.btchina.net/" target="_blank">http://bt1.btchina.net</a>就用的script实现的表格排序。btchina的表格排序的script源文件使用的是Erik Arvidsson(WebFX)做的一款程序叫做Sortable Table。官方有强大的技术支持。清访问<a href="http://webfx.eae.net/dhtml/tablesort/tablesort.html" target="_blank">http://webfx.eae.net/dhtml/tablesort/tablesort.html</a>这款程序相对效率比较高。<br />演示：<a href="http://webfx.eae.net/dhtml/sortabletable/demo.html" target="_blank">http://webfx.eae.net/dhtml/sortabletable/demo.html</a><br />官方地址：http://webfx.eae.net/dhtml/tablesort/tablesort.html<br /><br />3，领军人物windy_sk（wind2000)的script代码．<br />老牌的，绝对是经典高手，在经典里掀起波澜无数．最早学习的就是他的代码．原贴：<br /><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=697036" target="_blank">http://www.blueidea.com/bbs/NewsDetail.asp?id=697036</a><br /><br />4，还有一些职业高手的代码，以后继续总结．<br /><br />还有网友sipo用.net做的代码....<br />核心代码是：<br />If viewstate(&quot;sortexp&quot;) Is Nothing Then<br />viewstate(&quot;sortexp&quot;) = e.SortExpression.ToString<br />ElseIf viewstate(&quot;sortexp&quot;) = e.SortExpression.ToString Then<br />viewstate(&quot;sortexp&quot;) += &quot; desc&quot;<br />Else<br />viewstate(&quot;sortexp&quot;) = e.SortExpression.ToString<br />End If<br />]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/228.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=228</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=228&amp;key=1e504606</trackback:ping></item><item><title>JavaScript动态添加删除表格行列</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/227.html</link><pubDate>Sat, 25 Feb 2006 17:19:00 +0800</pubDate><guid>http://blog.hnce.net/post/227.html</guid><description><![CDATA[<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 上周因为手头一个东西需要增加不定项目，左思右想没有找到一个好的解决办法。刚好旧友soot过来深圳，他给了我一个办法，用Javascript动态添加删除表格行的思路，并演示了一下，符合我的要求，于是拿出来与大家共分享<br /><br />以下是我测试的代码<br />&lt;%<br />&nbsp;<br />&nbsp;If Request(&quot;dd&quot;)&lt;&gt;&quot;&quot; Then<br />&nbsp;&nbsp;Response.write(Ubound(split(request(&quot;dd&quot;),&quot;,&quot;)))<br />&nbsp;End If</p><p>%&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;script&gt;<br />var i = 0;<br />function add() {<br />&nbsp;i++;<br />&nbsp;var tbl = document.all.tbl;<br />&nbsp;var tr = tbl.insertRow();<br />&nbsp;var td = tr.insertCell();<br />&nbsp;td.innerHTML = &quot;&lt;input name=&#39;dd&#39; value = &#39;dd&quot;+i+&quot;&#39;&gt;&quot;<br />}<br />&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;</p><p>&lt;form method=post&gt;<br />&lt;table id=tbl&gt;<br />&lt;tr&gt;&lt;td&gt;&lt;input name=&quot;dd&quot; value = &quot;dd0&quot;&gt;&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;</p><p>&lt;INPUT TYPE=&quot;button&quot; value=&quot;add&quot; onclick=&quot;add()&quot;&gt;<br />&lt;INPUT TYPE=&quot;submit&quot; value=&quot;submit&quot;&gt;<br />&lt;/form&gt;<br />&lt;/html&gt;</p><p>添加之后同时将值存在一个隐藏表单域中，以便提交时使用，使用数组方法接收值。<br /><br />今日在网上搜索，发现一个网友的博客中也有相关代码，于是帖过来一起参考。<br /><br /><br /></p><p>&lt;table id=&quot;idTB&quot; border=0&gt;&lt;!--注意id，与JS中的要相对应--&gt;<br />&nbsp; &lt;tr id=idTR&gt;<br />&nbsp;&nbsp;&nbsp; &lt;td&gt;第一行 &lt;input type=&#39;button&#39;&gt;&lt;/td&gt;<br />&nbsp; &lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;input type=&quot;button&quot; onclick=&quot;addRow()&quot; value=&quot;添加一行&quot;&gt;&lt;br&gt;<br />&lt;input type=&quot;button&quot; onclick=&quot;delRow()&quot; value=&quot;删除一行&quot;&gt; Row index:&lt;input id=&quot;idIndex&quot;&gt;(&lt;a id=&quot;idFirst&quot;&gt;1&lt;/a&gt;~&lt;a id=&quot;idLast&quot;&gt;1&lt;/a&gt;)<br />&lt;script&gt;<br />function addRow(){//添加表格的一行<br />&nbsp; oTR=idTB.insertRow(idTB.rows.length);<br />&nbsp; tmpNum=oTR.rowIndex;<br />&nbsp; oTD=oTR.insertCell(0);<br />&nbsp; oTD.innerText=&quot;第&quot; + tmpNum+&quot;行&quot;;//在该处添加的HTML代码会原封不动的显示在页面上<br />&nbsp; oTD.innerHTML=&quot;&lt;input type=&#39;text&#39; name=&#39;txt&quot;+tmpNum+&quot;&#39;&gt;&quot;;//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。<br />&nbsp; idLast.innerText=idTB.rows.length;<br />&nbsp; if(idTB.rows.length&gt;0)<br />&nbsp;&nbsp;&nbsp; idFirst.innerText=&#39;1&#39;;<br />&nbsp; return true;<br />}<br />function delRow(){//删除表格的一行<br />&nbsp; sIndex=idIndex.value;<br />&nbsp; if(sIndex==&#39;&#39;)<br />&nbsp;&nbsp;&nbsp; sIndex=idTB.rows.length-1;<br />&nbsp; else<br />&nbsp;&nbsp;&nbsp; sIndex=parseInt(sIndex)-1;<br />&nbsp;&nbsp;&nbsp; <br />&nbsp;idTB.deleteRow(sIndex);<br />&nbsp; <br />&nbsp; idLast.innerText=idTB.rows.length;<br />&nbsp; if(idTB.rows.length==0)<br />&nbsp;&nbsp;&nbsp; idFirst.innerText=&#39;0&#39;;<br />}<br />&lt;/script&gt;</p>]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/227.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=227</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=227&amp;key=a90a619d</trackback:ping></item><item><title>很酷的tooltip效果</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/217.html</link><pubDate>Tue, 14 Feb 2006 23:31:00 +0800</pubDate><guid>http://blog.hnce.net/post/217.html</guid><description><![CDATA[<strong><font color="#ff0000">很酷的tooltip效果</font></strong><br /><br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta&nbsp;http-equiv=&quot;Content-Type&quot;&nbsp;content=&quot;text/html;&nbsp;charset=gb2312&quot;&gt;<br />&lt;title&gt;tip&lt;/title&gt;<br />&lt;script&nbsp;language=&quot;javascript&quot;&gt;<br />var&nbsp;baseUrl=&quot;http://202.101.111.24/temp/&quot; <br />var&nbsp;offsetfromcursorX=12&nbsp;//Customize&nbsp;x&nbsp;offset&nbsp;of&nbsp;tooltip<br />var&nbsp;offsetfromcursorY=10&nbsp;//Customize&nbsp;y&nbsp;offset&nbsp;of&nbsp;tooltip<br /><br />var&nbsp;offsetdivfrompointerX=10&nbsp;//Customize&nbsp;x&nbsp;offset&nbsp;of&nbsp;tooltip&nbsp;DIV&nbsp;relative&nbsp;to&nbsp;pointer&nbsp;image<br />var&nbsp;offsetdivfrompointerY=14&nbsp;//Customize&nbsp;y&nbsp;offset&nbsp;of&nbsp;tooltip&nbsp;DIV&nbsp;relative&nbsp;to&nbsp;pointer&nbsp;image.&nbsp;Tip:&nbsp;Set&nbsp;it&nbsp;to&nbsp;(height_of_pointer_image-1).<br /><br />document.write(&#39;&lt;div&nbsp;id=&quot;dhtmltooltip&quot;&gt;&lt;/div&gt;&#39;)&nbsp;//write&nbsp;out&nbsp;tooltip&nbsp;DIV<br />document.write(&#39;&lt;img&nbsp;id=&quot;dhtmlpointer&quot;&nbsp;src=baseUrl+&quot;tip_top1.gif&quot;&nbsp;style=&quot;display:none&quot;&gt;&#39;)&nbsp;//write&nbsp;out&nbsp;pointer&nbsp;image<br /><br />var&nbsp;ie=document.all<br />var&nbsp;ns6=document.getElementById&nbsp;&amp;&amp;&nbsp;!document.all<br />var&nbsp;enabletip=false<br />if&nbsp;(ie||ns6)<br />var&nbsp;tipobj=document.all?&nbsp;document.all[&quot;dhtmltooltip&quot;]&nbsp;:&nbsp;document.getElementById?&nbsp;document.getElementById(&quot;dhtmltooltip&quot;)&nbsp;:&nbsp;&quot;&quot;<br /><br />var&nbsp;pointerobj=document.all?&nbsp;document.all[&quot;dhtmlpointer&quot;]&nbsp;:&nbsp;document.getElementById?&nbsp;document.getElementById(&quot;dhtmlpointer&quot;)&nbsp;:&nbsp;&quot;&quot;<br /><br />function&nbsp;ietruebody(){<br />return&nbsp;(document.compatMode&nbsp;&amp;&amp;&nbsp;document.compatMode!=&quot;BackCompat&quot;)?&nbsp;document.documentElement&nbsp;:&nbsp;document.body<br />}<br /><br />function&nbsp;showtip(thecolor){<br />&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(ns6||ie){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tip=&#39;&#39;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;thecolor!=&quot;undefined&quot;&nbsp;&amp;&amp;&nbsp;thecolor!=&quot;&quot;)&nbsp;tipobj.style.backgroundColor=thecolor<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;o=event.srcElement;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(o.tip==null&nbsp;&amp;&amp;&nbsp;o.tip==null){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enabletip=true<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tip=o.tip<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tip=tip.replace(/\n/g,&quot;&lt;br&gt;&quot;)//&nbsp;换行符<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tipobj.innerHTML=tip.replace(/\r/g,&quot;&lt;br&gt;&quot;)//&nbsp;回车符<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enabletip=true<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false<br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />}<br /><br />function&nbsp;positiontip(e){<br />if(!enabletip)&nbsp;return&nbsp;false;<br />var&nbsp;nondefaultpos=false<br />var&nbsp;curX=(ns6)?e.pageX&nbsp;:&nbsp;event.clientX+ietruebody().scrollLeft;<br />var&nbsp;curY=(ns6)?e.pageY&nbsp;:&nbsp;event.clientY+ietruebody().scrollTop;<br /><br />//Find&nbsp;out&nbsp;how&nbsp;close&nbsp;the&nbsp;mouse&nbsp;is&nbsp;to&nbsp;the&nbsp;corner&nbsp;of&nbsp;the&nbsp;window<br />var&nbsp;winwidth=ie&amp;&amp;!window.opera?&nbsp;ietruebody().clientWidth&nbsp;:&nbsp;window.innerWidth-20<br />var&nbsp;winheight=ie&amp;&amp;!window.opera?&nbsp;ietruebody().clientHeight&nbsp;:&nbsp;window.innerHeight-20<br />var&nbsp;rightedge=ie&amp;&amp;!window.opera?&nbsp;winwidth-event.clientX-offsetfromcursorX:&nbsp;winwidth-e.clientX-offsetfromcursorX<br />var&nbsp;bottomedge=ie&amp;&amp;!window.opera?&nbsp;winheight-event.clientY-offsetfromcursorY&nbsp;:&nbsp;winheight-e.clientY-offsetfromcursorY<br /><br />var&nbsp;leftedge=(offsetfromcursorX&lt;0)?&nbsp;offsetfromcursorX*(-1)&nbsp;:&nbsp;-1000<br />var&nbsp;s=&#39;&#39;<br />s=&#39;窗口宽度=&#39;+winwidth+&#39;\t窗口高度=&#39;+winheight+&#39;\tevent.clientX=&#39;+event.clientX+&#39;\tevent.x=&#39;+event.x+&#39;\tevent.clientY=&#39;+event.clientY+&#39;\tevent.y=&#39;+event.y<br />s+=&#39;\&lt;br&gt;DIV宽度tipobj.offsetWidth=&#39;+tipobj.offsetWidth+&#39;\t层到最右边距离(&#39;+rightedge+&#39;)=&#39;+winwidth+&#39;-&#39;+event.clientX+&#39;-&#39;+offsetfromcursorX<br />msg.innerHTML=s<br />//if&nbsp;the&nbsp;horizontal&nbsp;distance&nbsp;isn&#39;t&nbsp;enough&nbsp;to&nbsp;accomodate&nbsp;the&nbsp;width&nbsp;of&nbsp;the&nbsp;context&nbsp;menu<br />if&nbsp;(rightedge&lt;tipobj.offsetWidth){<br />&nbsp;&nbsp;&nbsp;&nbsp;//hidetip();<br />&nbsp;&nbsp;&nbsp;&nbsp;//move&nbsp;the&nbsp;horizontal&nbsp;position&nbsp;of&nbsp;the&nbsp;menu&nbsp;to&nbsp;the&nbsp;left&nbsp;by&nbsp;it&#39;s&nbsp;width<br />&nbsp;&nbsp;&nbsp;&nbsp;tipobj.style.left=curX-tipobj.offsetWidth+&quot;px&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;tipobj.filters.item(&#39;DXImageTransform.Microsoft.Shadow&#39;).Direction&nbsp;=225<br />&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.style.left=curX-offsetfromcursorX-offsetdivfrompointerX+&quot;px&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.src=baseUrl+&#39;tip_top2.GIF&#39;<br />&nbsp;&nbsp;&nbsp;&nbsp;//nondefaultpos=true<br />&nbsp;&nbsp;&nbsp;&nbsp;//showtip();<br />}<br />else&nbsp;if&nbsp;(curX&lt;leftedge)<br />&nbsp;&nbsp;&nbsp;&nbsp;tipobj.style.left=&quot;5px&quot;<br />else{<br />&nbsp;&nbsp;&nbsp;&nbsp;//position&nbsp;the&nbsp;horizontal&nbsp;position&nbsp;of&nbsp;the&nbsp;menu&nbsp;where&nbsp;the&nbsp;mouse&nbsp;is&nbsp;positioned<br />&nbsp;&nbsp;&nbsp;&nbsp;tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+&quot;px&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;tipobj.filters.item(&#39;DXImageTransform.Microsoft.Shadow&#39;).Direction&nbsp;=135<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.style.left=curX+offsetfromcursorX+&quot;px&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.src=baseUrl+&quot;tip_top1.gif&quot;<br />}<br /><br />//same&nbsp;concept&nbsp;with&nbsp;the&nbsp;vertical&nbsp;position<br />if&nbsp;(bottomedge&lt;tipobj.offsetHeight){<br />&nbsp;&nbsp;&nbsp;&nbsp;tipobj.style.top=curY-tipobj.offsetHeight-offsetdivfrompointerY-offsetfromcursorY+&quot;px&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;//nondefaultpos=true<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.style.top=curY-offsetdivfrompointerY-offsetfromcursorY-1+&quot;px&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;if(rightedge&gt;tipobj.offsetWidth)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{pointerobj.src=baseUrl+&quot;tip_bottom1.GIF&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tipobj.filters.item(&#39;DXImageTransform.Microsoft.Shadow&#39;).Direction&nbsp;=45}<br />&nbsp;&nbsp;&nbsp;&nbsp;else<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{pointerobj.src=baseUrl+&quot;tip_bottom2.GIF&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tipobj.filters.item(&#39;DXImageTransform.Microsoft.Shadow&#39;).Direction&nbsp;=315}<br />}<br />else{<br />&nbsp;&nbsp;&nbsp;&nbsp;tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+&quot;px&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.style.top=curY+offsetfromcursorY+&quot;px&quot;<br />}<br />pointerobj.style.display=&quot;block&quot;<br />tipobj.style.display=&quot;block&quot;<br /><br />/*if&nbsp;(!nondefaultpos)<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.style.display=&quot;block&quot;<br />else<br />&nbsp;&nbsp;&nbsp;&nbsp;//pointerobj.style.display=&quot;block&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;pointerobj.style.display=&quot;none&quot;<br />*/<br />}<br /><br /><br /><br />function&nbsp;hidetip(){<br />if&nbsp;(ns6||ie){<br />enabletip=false<br />tipobj.style.display=&quot;none&quot;<br />pointerobj.style.display=&quot;none&quot;<br />tipobj.style.left=&quot;-1000px&quot;<br />tipobj.style.backgroundColor=&#39;&#39;<br />tipobj.style.width=&#39;&#39;<br />}<br />}<br /><br />document.onmousemove=positiontip<br />&lt;/script&gt;<br />&lt;style&nbsp;type=&quot;text/css&quot;&gt;<br />&lt;!--<br />body,table,td&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;&quot;新宋体&quot;,&nbsp;&quot;宋体&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;12px;<br />}<br />#dhtmltooltip&nbsp;{white-space:&nbsp;nowrap;<br />&nbsp;&nbsp;&nbsp;&nbsp;BORDER-RIGHT:&nbsp;black&nbsp;1px&nbsp;solid;&nbsp;PADDING-RIGHT:&nbsp;2px;&nbsp;BORDER-TOP:&nbsp;black&nbsp;1px&nbsp;solid;&nbsp;DISPLAY:&nbsp;none;&nbsp;PADDING-LEFT:&nbsp;2px;&nbsp;Z-INDEX:&nbsp;100;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FILTER:&nbsp;progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,strength=5);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LEFT:&nbsp;-300px;&nbsp;PADDING-BOTTOM:&nbsp;2px;&nbsp;BORDER-LEFT:&nbsp;black&nbsp;1px&nbsp;solid;&nbsp;PADDING-TOP:&nbsp;2px;&nbsp;BORDER-BOTTOM:&nbsp;black&nbsp;1px&nbsp;solid;&nbsp;POSITION:&nbsp;absolute;&nbsp;BACKGROUND-COLOR:&nbsp;lightyellow<br />}<br />#dhtmlpointer&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;DISPLAY:&nbsp;block;&nbsp;Z-INDEX:&nbsp;101;&nbsp;LEFT:&nbsp;-300px;&nbsp;POSITION:&nbsp;absolute<br />}<br />.style1&nbsp;{color:&nbsp;red}<br /><br />--&gt;<br />&lt;/style&gt;<br />&lt;/head&gt;<br /><br />&lt;body&gt;<br />&lt;TABLE&nbsp;cellSpacing=1&nbsp;cellPadding=2&nbsp;width=&quot;100%&quot;&nbsp;border=0&gt;<br />&nbsp;&nbsp;&lt;TBODY&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;19%&quot;&gt;&lt;A&nbsp;onmouseover=showtip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onmouseout=hidetip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;http://web:83/collect/Guest_ShowRes.asp?ID=29&quot; &nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target=_blank&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tip=&quot;&middot;发布者：yxl&lt;br&gt;&middot;所属单位：问题出在，当链接出现在最右边和最下边时&lt;br&gt;&middot;发布日期：&lt;font&nbsp;color=red&gt;2005-4-19&lt;/font&gt;&lt;br&gt;&middot;点击次数：&lt;font&nbsp;color=red&gt;150&lt;/font&gt;&lt;br&gt;&middot;下载次数：&lt;font&nbsp;color=red&gt;29&lt;/font&gt;&lt;br&gt;&middot;是否新课标：否&lt;br&gt;&middot;教材版本：人教版&lt;br&gt;&middot;所属科目：语文&lt;br&gt;&middot;资源类型：教学辅助材料&lt;br&gt;&middot;资源格式：audio/MP3&lt;br&gt;&middot;资源简介：&lt;font&nbsp;color=red&gt;资源上传&lt;/font&gt;&quot;&gt;请高手帮我看看&lt;/A&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;56%&quot;&gt;&lt;span&nbsp;class=&quot;style1&quot;&gt;最右边和最下边都有问题&lt;/span&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;25%&quot;&nbsp;align=&quot;right&quot;&gt;&lt;A&nbsp;onmouseover=showtip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onmouseout=hidetip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;#&quot;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target=_blank&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tip=&quot;&middot;发布者：yxl&lt;br&gt;&middot;所属单位：问题出在，当链接出现在最右边和最下边时&lt;br&gt;&middot;发布日期：&lt;font&nbsp;color=red&gt;2005-4-19&lt;/font&gt;&lt;br&gt;&middot;点击次数：&lt;font&nbsp;color=red&gt;150&lt;/font&gt;&lt;br&gt;&middot;下载次数：&lt;font&nbsp;color=red&gt;29&lt;/font&gt;&lt;br&gt;&middot;是否新课标：否&lt;br&gt;&middot;教材版本：人教版&lt;br&gt;&middot;所属科目：语文&lt;br&gt;&middot;资源类型：教学辅助材料&lt;br&gt;&middot;资源格式：audio/MP3&lt;br&gt;&middot;资源简介：&lt;font&nbsp;color=red&gt;资源上传&lt;/font&gt;&quot;&gt;请高手帮我看看&lt;/A&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;height=&quot;100&quot;&gt;&amp;nbsp;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&gt;&amp;nbsp;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&gt;&amp;nbsp;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;height=&quot;300&quot;&nbsp;colspan=&quot;3&quot;&gt;&lt;div&nbsp;id=&quot;msg&quot;&gt;&lt;/div&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;19%&quot;&nbsp;height=&quot;25&quot;&gt;&amp;nbsp;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;56%&quot;&nbsp;align=&quot;center&quot;&gt;&amp;nbsp;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;25%&quot;&nbsp;align=&quot;right&quot;&gt;&lt;A&nbsp;onmouseover=showtip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onmouseout=hidetip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;#&quot;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target=_blank&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tip=&quot;&middot;当链接在很右边的时候这个层会出现多行&quot;&gt;鼠标移到这里看看&lt;/A&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/TR&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;TR&nbsp;valign=&quot;bottom&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;19%&quot;&nbsp;height=&quot;200&quot;&gt;&lt;A&nbsp;onmouseover=showtip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onmouseout=hidetip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;#&quot;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target=_blank&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tip=&quot;&middot;这里会明闪一下。&lt;br&gt;层先会在下面显示一下&lt;br&gt;再跑到上面&quot;&gt;鼠标移到这里看看&lt;/A&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;56%&quot;&nbsp;align=&quot;center&quot;&gt;&amp;nbsp;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TD&nbsp;width=&quot;25%&quot;&nbsp;align=&quot;right&quot;&gt;&lt;A&nbsp;onmouseover=showtip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onmouseout=hidetip()&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;#&quot;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target=_blank&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tip=&quot;&middot;发布者：yxl&lt;br&gt;&middot;所属单位：问题出在，当链接出现在最右边和最下边时&lt;br&gt;&middot;发布日期：&lt;font&nbsp;color=red&gt;2005-4-19&lt;/font&gt;&lt;br&gt;&middot;点击次数：&lt;font&nbsp;color=red&gt;150&lt;/font&gt;&lt;br&gt;&middot;下载次数：&lt;font&nbsp;color=red&gt;29&lt;/font&gt;&lt;br&gt;&lt;font&nbsp;color=blue&gt;这里左右移动层会变大&lt;/font&gt;&quot;&gt;&nbsp;鼠标移到这里看看&lt;/A&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/TR&gt;<br />&nbsp;&nbsp;&lt;/TBODY&gt;<br />&lt;/TABLE&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/217.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=217</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=217&amp;key=65fb7313</trackback:ping></item><item><title>在长时间操作过程中更新显示</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/213.html</link><pubDate>Tue, 17 Jan 2006 22:50:00 +0800</pubDate><guid>http://blog.hnce.net/post/213.html</guid><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 上个月我们讨论了使用&nbsp;DHTML&nbsp;提供&nbsp;Web&nbsp;服务，在接下来的几个月里，我们将进一步详细讨论这个主题。在&nbsp;Web&nbsp;服务这个问题上，越是思考它将为&nbsp;Web&nbsp;应用程序提供的种种可能，我就越感到兴奋。我知道这不太好，可这些事情确实让我兴奋。不过，这个月我想我该讲讲更基本的主题。近几个月来我卷入了一些关于这个问题的漫长的电子邮件讨论，我想解释一下这个问题为什么会存在，以及可能的解决方案。这会非常有趣。引起讨论的第一封电子邮件一般是这样写的：<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 我编了一个使用&nbsp;while&nbsp;循环的脚本函数，它的执行时间很长。尽管我在循环里加入了一个作为迭代进程的更新显示的语句，可是总要到例程完成之后才会更新显示。<br /><br />邮件中往往附着这样一段脚本：<br /><br />&lt;SCRIPT&gt;<br />function&nbsp;longtime()<br />{&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;var&nbsp;i=0;<br />&nbsp;&nbsp;&nbsp;while&nbsp;(i&lt;=500)<br />&nbsp;&nbsp;&nbsp;{&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d1.innerHTML=&quot;Count&nbsp;=&quot;+i;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;以下语句代表一个很长的过程<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;j=0;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(j&lt;=10000)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;j++;<br />&nbsp;&nbsp;&nbsp;}<br />}<br />&lt;/SCRIPT&gt;<br />&lt;INPUT&nbsp;TYPE=&quot;BUTTON&quot;&nbsp;onclick=&quot;longtime();&quot;&nbsp;value=&quot;Click&nbsp;Me&quot;&gt;<br />&lt;DIV&nbsp;id=&quot;d1&quot;&gt;This&nbsp;is&nbsp;where&nbsp;the&nbsp;count&nbsp;of&nbsp;iterations&nbsp;should&nbsp;display&lt;/DIV&gt;<br /><br />查看示例。<br /><br />编写&nbsp;DHTML&nbsp;的新手遇到这种问题并不奇怪。尽管编过一段时间&nbsp;DHTML&nbsp;的人会立刻回答：&ldquo;这还不明显吗？&rdquo;这个问题确实值得好好解释一番。<br /><br />这段&nbsp;HTML&nbsp;和脚本的预期效果是在执行长时间迭代操作的过程中显示进度计数。而实际的效果却非常糟糕。最明显的问题是，按下按钮后会有一个停顿，用户会看到提示，说脚本将运行很长时间，并询问是否放弃操作。同时，显示会更新为计数值。您可能会注意到出现提示之前的另一个细微效果：按钮保持按下状态，而用户根本无法使用浏览器。正是这一事实（用户被锁在浏览器之外）导致&nbsp;Microsoft&reg;&nbsp;Internet&nbsp;Explorer&nbsp;对用户发出提示，以便用户能够避免运行时间过长的脚本。<br /><br />这是为什么？<br />脚本在&nbsp;Internet&nbsp;Explorer&nbsp;中运行的一个原则是：它的运行是不可中断的。所以，执行上面的脚本时，浏览器将处于锁定状态，直至脚本运行结束。乍一看来，这象是一个糟糕的设计，一个缺陷。可是，如果停下来想一想：如果不这样做会怎样，您就可能会意识到，这根本不是缺陷，而是一个逻辑设计。<br /><br />让我们设想一下，如果上面的脚本按照作者的意图执行，用户将会在显示器上看到计数值从&nbsp;0&nbsp;增长到&nbsp;500。这时，每次显示更新时就会生成&nbsp;onresize&nbsp;和&nbsp;onchange&nbsp;这样的事件。脚本会立即处理这些事件吗？很可能不，因为这会对脚本运行的原函数造成影响，例如，全局变量值的变化。另一种方案是，在执行原函数时所有事件均排队等候处理，但这也会带来一系列问题，而且与预期效果所距甚远。有一点对脚本很有用处，即能够执行并决定内容应该如何在屏幕上显示，然后让所有更新同步发生，而不是在屏幕的不同部分不断改变显示。<br /><br />那么，为什么会在提示放弃脚本操作时更新显示呢？这是因为对话框的显示会导致脚本转让控制权，所以显示引擎才有机会更新显示，显示当前的&nbsp;DHTML&nbsp;文档树。脚本转让控制权的思路非常重要，这一点类似于汽车让路给其他车辆加入车流。在浏览器中，当脚本引擎转让控制权时，允许显示引擎取得控制，这时，显示引擎查看&nbsp;DHTML&nbsp;文档树，并根据上次获得控制后发生的变化进行更新。这里我已经简化了浏览器的内部过程。显示引擎非常智能，能够找到显示内容中无效并需要调整的部分。这可能会导致当前显示内容的布局变化，继而强制屏幕的其他部分重新显示。这里需要注意的重点是，脚本控制权的转让允许显示更新和用户使用浏览器。所以，要使我们的示例脚本达到预期效果，需要强制脚本转让控制权。<br /><br />使脚本转让控制权<br />要使脚本转让控制权，开发人员可以采用下面几种做法。首先，就像我们已经看到的，对话框会强制脚本转让控制权。显然，在我们这个示例里不想使用对话框，因为我们只想更新屏幕，而不想给用户任何提示。不过，对话框能够强制脚本转让控制权的事实引发了一个有关调试脚本的有趣问题。有时，开发人员会奇怪为什么一段代码不象预期的那样运行，而一种简单快捷的方法是在待查代码中插入如下代码行，以了解变量&nbsp;mystuff&nbsp;的值：<br /><br />alert(&quot;The&nbsp;value&nbsp;of&nbsp;mystuff&nbsp;is:&nbsp;&quot;+mystuff);&nbsp;&nbsp;<br /><br />在大多数情况下，它工作得非常好。不过，因为警告会强制显示对话框，而脚本将转让控制权。这一转让会导致显示更新以及某些布局样式值的变化。所以，后续脚本流程可能会与脚本中不存在警告时不同。我经常使用的一种调试技巧是在浏览器的状态栏中显示变量的值（而不是使用警告）：<br /><br />window.status=&quot;The&nbsp;value&nbsp;of&nbsp;mystuff&nbsp;is:&nbsp;&quot;+mystuff;&nbsp;&nbsp;<br /><br />这样脚本的流程不会因为出现对话框而中断。<br /><br />另一种强制脚本转让控制权的方法是使用超时，在我们的示例脚本中将使用这一技巧。<br /><br />超时<br />超时并不仅仅是美式足球中使用的一个奇怪概念。（在美式足球中，超时允许一个队中断比赛。）它还是一种强有力的脚本编写技巧，允许在经过一段时间后再调用脚本。可用的计时器方法有两种：setTimeout（英文）和&nbsp;setInterval（英文）。它们的功能类似，setTimeout&nbsp;提供对函数的唯一一次回调，而&nbsp;setInterval&nbsp;按照适当的时间间隔重复回调函数。这里我们使用&nbsp;setTimeout。<br /><br />&lt;SCRIPT&gt;<br />var&nbsp;i;<br />function&nbsp;longtime()<br />{<br />&nbsp;&nbsp;i=0;<br />&nbsp;&nbsp;timedIterations();&nbsp;<br />}<br /><br />function&nbsp;timedIterations()<br />{<br />&nbsp;&nbsp;&nbsp;if&nbsp;(i&lt;=500)<br />&nbsp;&nbsp;&nbsp;{&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d1.innerHTML=&quot;Count&nbsp;=&quot;+i;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;下列语句代表需要一段时间的计算<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;j=0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(j&lt;=10000)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;j++;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(&quot;timedIterations();&quot;,&nbsp;1);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;}<br />}<br />&lt;/SCRIPT&gt;<br />&lt;INPUT&nbsp;TYPE=&quot;BUTTON&quot;&nbsp;onclick=&quot;longtime();&quot;&nbsp;value=&quot;Click&nbsp;Me&quot;&gt;<br />&lt;DIV&nbsp;id=&quot;d1&quot;&gt;This&nbsp;is&nbsp;where&nbsp;the&nbsp;count&nbsp;of&nbsp;iterations&nbsp;should&nbsp;display&lt;/DIV&gt;<br />&lt;SCRIPT&gt;<br />var&nbsp;i;<br />function&nbsp;longtime()<br />{<br />&nbsp;&nbsp;i=0;<br />&nbsp;&nbsp;timedIterations();&nbsp;<br />}<br /><br />function&nbsp;timedIterations()<br />{<br />&nbsp;&nbsp;&nbsp;if&nbsp;(i&lt;=1000)<br />&nbsp;&nbsp;&nbsp;{&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d1.innerHTML=&quot;Count&nbsp;=&quot;+i;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;下列语句代表需要一段时间的计算<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;j=0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(j&lt;=10000)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;j++;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(&quot;timedIterations();&quot;,&nbsp;1);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;}<br />}<br />&lt;/SCRIPT&gt;<br />&lt;INPUT&nbsp;TYPE=&quot;BUTTON&quot;&nbsp;onclick=&quot;longtime();&quot;&nbsp;value=&quot;Click&nbsp;Me&quot;&gt;<br />&lt;DIV&nbsp;id=&quot;d1&quot;&gt;This&nbsp;is&nbsp;where&nbsp;the&nbsp;count&nbsp;of&nbsp;iterations&nbsp;should&nbsp;display&lt;/DIV&gt;<br /><br />查看示例。<br /><br />在上面的示例中，我们使用了原来的代码。为清楚起见，我们将其分为两个函数，其中主函数&nbsp;timedIterations&nbsp;使用&nbsp;setTimeout&nbsp;来再次调用其自身。这里&nbsp;setTimeout&nbsp;的频率设置为&nbsp;1&nbsp;毫秒，以便其能够尽快回调。不能依赖这些计时器来计算精确的毫秒数，但如果在上述示例中将超时设置为&nbsp;1000&nbsp;毫秒，其结果将精确到每次迭代耗时一秒。当然，您可以根据所执行的任务，自行决定如何将过程划分为片断来进行计时迭代。<br /><br />让用户等待<br />现在这个示例做得很好，不过，我们往往想让用户在处理过程中等待，直至处理结束。一个简单的实现方法是禁止输入并显示等待光标：<br /><br />&lt;SCRIPT&gt;<br />var&nbsp;i;<br />function&nbsp;longtime()<br />{<br />&nbsp;&nbsp;i=0;<br />&nbsp;&nbsp;b1.style.cursor=&quot;wait&quot;;<br />&nbsp;&nbsp;b1.disabled=true;&nbsp;<br />&nbsp;&nbsp;timedIterations();&nbsp;<br />}<br /><br />function&nbsp;timedIterations()<br />{<br />&nbsp;&nbsp;&nbsp;if&nbsp;(i&lt;=500)<br />&nbsp;&nbsp;&nbsp;{&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d1.innerHTML=&quot;Count&nbsp;=&quot;+i;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;下列语句代表需要一段时间的计算<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;j=0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(j&lt;=10000)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;j++;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(&quot;timedIterations();&quot;,&nbsp;1);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;&nbsp;else<br />&nbsp;&nbsp;&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b1.style.cursor=&quot;&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b1.disabled=false;&nbsp;<br />&nbsp;&nbsp;&nbsp;}<br />}<br />&lt;/SCRIPT&gt;<br />&lt;BODY&nbsp;id=b1&gt;<br />&lt;INPUT&nbsp;id=&quot;ip1&quot;&nbsp;TYPE=&quot;BUTTON&quot;&nbsp;onclick=&quot;longtime();&quot;&nbsp;value=&quot;Click&nbsp;Me&quot;&gt;<br />&lt;DIV&nbsp;id=&quot;d1&quot;&gt;This&nbsp;is&nbsp;where&nbsp;the&nbsp;count&nbsp;of&nbsp;iterations&nbsp;should&nbsp;display&lt;/DIV&gt;<br />&lt;/BODY&gt;<br /><br /><a href="http://www.microsoft.com/china/MSDN/library/archives/voiCEs/dude02262001-disp3.htm" target="_blank">查看示例。</a><br /><br />在上面的示例中，我加入了一点代码来禁用整个文档内容，并在进行迭代时显示等待光标。因此，浏览器将继续更新，用户不会锁定它，但同时用户也不能操作页面和导致其他事件发生。当然，这种方法非常直接，而您可能希望禁用页面的某些部分，而用户仍然能够通过一种集成的方式来放弃操作。&ldquo;别只是拦住用户！&rdquo;<br /><br />这个月要说的最后一点是：在编写&nbsp;DHTML&nbsp;功能时，重要的一点是不要将用户与浏览器隔离开来。如果整个浏览器看起来像是锁住了，会让用户感到非常不快。即使您不希望用户在执行长时间操作时更改页面上的任何内容，也不应该这样。可以在浏览器中使用某种功能给用户提供当前状态的反馈，让用户感觉良好。最后，我们对示例做了一个非常简单的修改，显示一个随迭代进度而增长的进度栏。<br />]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/213.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=213</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=213&amp;key=cb7a33ec</trackback:ping></item><item><title>慎用javascript的字符串连接操作</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/192.html</link><pubDate>Sun, 18 Dec 2005 22:45:00 +0800</pubDate><guid>http://blog.hnce.net/post/192.html</guid><description><![CDATA[<br /><br /><br />使用普通javascript字符连接操作<br />var s=&quot;&quot;;<br />var time1=new Date();<br />for(var i=0;i&lt;10000;i++){<br />s+=&quot;aaaaaaaa&quot;;<br />}<br />var time2=new Date();<br />document.getElementById(&quot;mill1&quot;).value=time2.getTime()-time1.getTime()+&quot;毫秒&quot;;<br /><br /><br />使用数组字符连接操作<br />var s=&quot;&quot;;<br />var arr=new Array();<br />var time1=new Date();<br />for(var i=0;i&lt;10000;i++){<br />arr.push(&quot;aaaaaaaa&quot;);<br />}<br />s=arr.join(&quot;&quot;);<br />var time2=new Date();<br />document.getElementById(&quot;mill2&quot;).value=time2.getTime()-time1.getTime()+&quot;毫秒&quot;;<br />]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/192.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=192</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=192&amp;key=8c7e0bad</trackback:ping></item><item><title>用JavaScript+DOM生成XML </title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/179.html</link><pubDate>Thu, 24 Nov 2005 14:58:00 +0800</pubDate><guid>http://blog.hnce.net/post/179.html</guid><description><![CDATA[<br /><br /><font size="2">&lt;script language=&quot;javascript&quot;&gt; <br />&lt;!-- <br />var doc = new ActiveXObject(&quot;Msxml2.DOMDocument&quot;); //ie5.5+,CreateObject(&quot;Microsoft.XMLDOM&quot;)&nbsp; <br /><br />//加载文档 <br />//doc.load(&quot;b.xml&quot;); <br /><br />//创建文件头 <br />var p = doc.createProcessingInstruction<br />(&quot;xml&quot;,&quot;version=&rsquo;&rsquo;1.0&rsquo;&rsquo;&nbsp; <br />encoding=&rsquo;&rsquo;gb2312&rsquo;&rsquo;&quot;); <br /><br />&nbsp;&nbsp;&nbsp; //添加文件头 <br />&nbsp;&nbsp;&nbsp; doc.appendChild(p); <br /><br />//用于直接加载时获得根接点 <br />//var root = doc.documentElement; <br /><br />//两种方式创建根接点 <br />//&nbsp;&nbsp;&nbsp; var root = <br />doc.createElement(&quot;students&quot;); <br />&nbsp;&nbsp;&nbsp; var root = doc.createNode(1,&quot;students&quot;,&quot;&quot;); <br /><br />&nbsp;&nbsp;&nbsp; //创建子接点 <br />&nbsp;&nbsp;&nbsp; var n = doc.createNode(1,&quot;ttyp&quot;,&quot;&quot;); <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //指定子接点文本 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //n.text = &quot; this is a test&quot;; <br />&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; //创建孙接点 <br />&nbsp;&nbsp;&nbsp; var o = doc.createElement(&quot;sex&quot;); <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; o.text = &quot;男&quot;;&nbsp;&nbsp;&nbsp; <br />//指定其文本 <br /><br />&nbsp;&nbsp;&nbsp; //创建属性 <br />&nbsp;&nbsp;&nbsp; var r = doc.createAttribute(&quot;id&quot;); <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; r.value=&quot;test&quot;; <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //添加属性 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.setAttributeNode(r); <br /><br />&nbsp;&nbsp;&nbsp; //创建第二个属性&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; var r1 = doc.createAttribute(&quot;class&quot;); <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; r1.value=&quot;tt&quot;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //添加属性 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.setAttributeNode(r1); <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //删除第二个属性 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.removeAttribute(&quot;class&quot;); <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //添加孙接点 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.appendChild(o); <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //添加文本接点 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.appendChild(doc.createTextNode<br />(&quot;this is a text node.&quot;)); <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //添加注释 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.appendChild(doc.createComment<br />(&quot;this is a comment\n&quot;)); <br />&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //添加子接点 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; root.appendChild(n); <br />&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; //复制接点 <br />&nbsp;&nbsp;&nbsp; var m = n.cloneNode(true); <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; root.appendChild(m); <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //删除接点 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; root.removeChild(root.childNodes(0)); <br /><br />&nbsp;&nbsp;&nbsp; //创建数据段 <br />&nbsp;&nbsp;&nbsp; var c = doc.createCDATASection<br />(&quot;this is a cdata&quot;); <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; c.text = &quot;hi,cdata&quot;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //添加数据段 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; root.appendChild(c); <br />&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; //添加根接点 <br />&nbsp;&nbsp;&nbsp; doc.appendChild(root); <br /><br />&nbsp;&nbsp;&nbsp; //查找接点 <br />&nbsp;&nbsp;&nbsp; var a = doc.getElementsByTagName(&quot;ttyp&quot;); <br />&nbsp;&nbsp;&nbsp; //var a = doc.selectNodes(&quot;//ttyp&quot;); <br /><br />&nbsp;&nbsp;&nbsp; //显示改接点的属性 <br />&nbsp;&nbsp;&nbsp; for(var i= 0;i&lt;a.length;i++) <br />&nbsp;&nbsp;&nbsp; { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(a[i].xml); <br />for(var j=0;j&lt;a[i].attributes.length;j++) <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(a[i].attributes[j].name); <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } <br />&nbsp;&nbsp;&nbsp; } <br /><br />&nbsp;&nbsp;&nbsp; //XML保存（需要在服务端，客户端用FSO） <br />&nbsp;&nbsp;&nbsp; //doc.save(); <br />&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; //查看根接点XML <br />&nbsp;&nbsp;&nbsp; if(n) <br />&nbsp;&nbsp;&nbsp; { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(n.ownerDocument.xml); <br />&nbsp;&nbsp;&nbsp; } <br /><br />//--&gt; <br />&lt;/script&gt;</font><br />]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/179.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=179</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=179&amp;key=c268b63e</trackback:ping></item><item><title>Javascript获取屏幕分辩率</title><author>a@b.com (slick)</author><link>http://blog.hnce.net/post/177.html</link><pubDate>Thu, 24 Nov 2005 11:31:00 +0800</pubDate><guid>http://blog.hnce.net/post/177.html</guid><description><![CDATA[<p><strong>Javascript中获取屏幕分辩率的方法</strong>：<br />screen.width<br />screen.height<br />]]></description><category>Javascript/Ajax</category><comments>http://blog.hnce.net/post/177.html#comment</comments><wfw:comment>http://blog.hnce.net/</wfw:comment><wfw:commentRss>http://blog.hnce.net/feed.asp?cmt=177</wfw:commentRss><trackback:ping>http://blog.hnce.net/cmd.asp?act=tb&amp;id=177&amp;key=3ee0b6d8</trackback:ping></item></channel></rss>
