21个值得收藏的Javascript技巧

古城微笑少年丶 2023-12-10 06:17 68阅读 0赞

**1 Javascript数组转换为CSV格式**

首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件。则我们可以使用如下的小技巧，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var</code>&nbsp;<code>fruits = [</code><code>'apple'</code><code>, </code><code>'peaches'</code><code>, </code><code>'oranges'</code><code>, </code><code>'mangoes'</code><code>];</code> <code>var</code>&nbsp;<code>str = fruits.valueOf();</code> </td> 
 </tr> 
 </tbody> 
</table>

输出：apple,peaches,oranges,mangoes

其中，valueOf()方法会将Javascript数组转变为逗号隔开的字符串。要注意的是，如果想不使用逗号分割，比如用｜号分割，则请使用join方法，如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var</code>&nbsp;<code>fruits = [</code><code>'apple'</code><code>, </code><code>'peaches'</code><code>, </code><code>'oranges'</code><code>, </code><code>'mangoes'</code><code>];</code> <code>var</code>&nbsp;<code>str = fruits.join(</code><code>"|"</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

输出： apple|peaches|oranges|mangoes

**2 将CSV格式重新转换回Javscript数组**

那么如何将一个CSV格式的字符串转变回Javascript数组呢？可以使用split()方法，就可以使用任何指定的字符去分隔，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var</code>&nbsp;<code>str = </code><code>"apple, peaches, oranges, mangoes"</code><code>;</code> <code>var</code>&nbsp;<code>fruitsArray = str.split(</code><code>","</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

输出 fruitsArray\[0\]: apple

**3 根据索引移除数组中的某个元素**

假如需要从Javascript数组中移除某个元素，可以使用splice方法，该方法将根据传入参数n，移除数组中移除第n个元素(Javascript数组中从第0位开始计算)。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>function</code>&nbsp;<code>removeByIndex(arr, index) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>arr.splice(index, 1);</code> <code>}</code> <code>test = </code><code>new</code>&nbsp;<code>Array();</code> <code>test[0] = </code><code>'Apple'</code><code>;</code> <code>test[1] = </code><code>'Ball'</code><code>;</code> <code>test[2] = </code><code>'Cat'</code><code>;</code> <code>test[3] = </code><code>'Dog'</code><code>;</code> <code>alert(</code><code>"Array before removing elements: "</code><code>+test);</code> <code>removeByIndex(test, 2);</code> <code>alert(</code><code>"Array after removing elements: "</code><code>+test);</code> </td> 
 </tr> 
 </tbody> 
</table>

则最后输出的为Apple,Ball,Dog

**4 根据元素的值移除数组元素中的值**

下面这个技巧是很实用的，是根据给定的值去删除数组中的元素，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>function</code>&nbsp;<code>removeByValue(arr, val) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>i=0; i&lt;arr.length; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(arr[i] == val) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>arr.splice(i, 1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>var</code>&nbsp;<code>somearray = [</code><code>"mon"</code><code>, </code><code>"tue"</code><code>, </code><code>"wed"</code><code>, </code><code>"thur"</code><code>]</code> <code>removeByValue(somearray, </code><code>"tue"</code><code>);</code> <code>//somearray 将会有的元素是 "mon", "wed", "thur"</code> </td> 
 </tr> 
 </tbody> 
</table>

当然，更好的方式是使用prototype的方法去实现，如下代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>Array.prototype.removeByValue = </code><code>function</code><code>(val) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>i=0; i&lt;</code><code>this</code><code>.length; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(</code><code>this</code><code>[i] == val) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.splice(i, 1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>//..</code> <code>var</code>&nbsp;<code>somearray = [</code><code>"mon"</code><code>, </code><code>"tue"</code><code>, </code><code>"wed"</code><code>, </code><code>"thur"</code><code>]</code> <code>somearray.removeByValue(</code><code>"tue"</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**5 通过字符串指定的方式动态调用某个方法**

有的时候，需要在运行时，动态调用某个已经存在的方法，并为其传入参数。这个如何实现呢？下面的代码可以：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>var</code>&nbsp;<code>strFun = </code><code>"someFunction"</code><code>; </code><code>//someFunction 为已经定义的方法名</code> <code>var</code>&nbsp;<code>strParam = </code><code>"this is the parameter"</code><code>; </code><code>//要传入方法的参数</code> <code>var</code>&nbsp;<code>fn = window[strFun];</code> &nbsp; <code>//调用方法传入参数</code> <code>fn(strParam);</code> </td> 
 </tr> 
 </tbody> 
</table>

**6 产生1到N的随机数**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>var</code>&nbsp;<code>random = Math.floor(Math.random() * N + 1);</code> &nbsp; <code>//产生1到10之间的随机数</code> <code>var</code>&nbsp;<code>random = Math.floor(Math.random() * 10 + 1); </code> &nbsp; <code>//产生1到100之间的随机数</code> <code>var</code>&nbsp;<code>random = Math.floor(Math.random() * 100 + 1);</code> </td> 
 </tr> 
 </tbody> 
</table>

**7 捕捉浏览器关闭的事件**

我们经常希望在用户关闭浏览器的时候，提示用户要保存尚未保存的东西，则下面的这个Javascript技巧是十分有用的，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>&lt;script language=</code><code>"javascript"</code><code>&gt;</code> <code>function</code>&nbsp;<code>fnUnloadHandler() { </code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"Unload event.. Do something to invalidate users session.."</code><code>); </code> <code>}</code> <code>&lt;/script&gt;</code> <code>&lt;body onbeforeunload=</code><code>"fnUnloadHandler()"</code><code>&gt;</code> <code>………</code> <code>&lt;/body&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

就是编写onbeforeunload()事件的代码即可

**8 检查是否按了回退键**

同样，可以检查用户是否按了回退键，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>window.onbeforeunload = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"You work will be lost."</code><code>;</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

**9 检查表单数据是否改变**

有的时候，需要检查用户是否修改了一个表单中的内容，则可以使用下面的技巧，其中如果修改了表单的内容则返回true，没修改表单的内容则返回false。代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>function</code>&nbsp;<code>formIsDirty(form) { </code> <code>&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>i = 0; i &lt; form.elements.length; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>element = form.elements[i];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>type = element.type;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(type == </code><code>"checkbox"</code>&nbsp;<code>|| type == </code><code>"radio"</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(element.checked != element.defaultChecked) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>true</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else</code>&nbsp;<code>if</code>&nbsp;<code>(type == </code><code>"hidden"</code>&nbsp;<code>|| type == </code><code>"password"</code>&nbsp;<code>||</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type == </code><code>"text"</code>&nbsp;<code>|| type == </code><code>"textarea"</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(element.value != element.defaultValue) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>true</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else</code>&nbsp;<code>if</code>&nbsp;<code>(type == </code><code>"select-one"</code>&nbsp;<code>|| type == </code><code>"select-multiple"</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>j = 0; j &lt; element.options.length; j++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(element.options[j].selected !=</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>element.options[j].defaultSelected) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>true</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>false</code><code>;</code> <code>}</code> &nbsp; <code>window.onbeforeunload = </code><code>function</code><code>(e) { </code> <code>&nbsp;&nbsp;</code><code>e = e || window.event;&nbsp; </code> <code>&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(formIsDirty(document.forms[</code><code>"someForm"</code><code>])) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// IE 和 Firefox</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>e.returnValue = </code><code>"You have unsaved changes."</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// Safari 浏览器</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"You have unsaved changes."</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

**10 完全禁止使用后退键**

下面的技巧放在页面中，则可以防止用户点后退键，这在一些情况下是需要的。代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;SCRIPT type=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.history.forward();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>noBack() { window.history.forward(); }</code> <code>&lt;/SCRIPT&gt;</code> <code>&lt;/HEAD&gt;</code> <code>&lt;BODY onload=</code><code>"noBack();"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>onpageshow=</code><code>"if (event.persisted) noBack();"</code>&nbsp;<code>onunload=</code><code>""</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**11 删除用户多选框中选择的项目**

下面提供的技巧，是当用户在下拉框多选项目的时候，当点删除的时候，可以一次删除它们，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>function</code>&nbsp;<code>selectBoxRemove(sourceID) { </code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//获得listbox的id</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>src = document.getElementById(sourceID);</code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//循环listbox </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>count= src.options.length-1; count &gt;= 0; count--) { </code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//如果找到要删除的选项，则删除</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(src.options[count].selected == </code><code>true</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>try</code>&nbsp;<code>{ </code> <code>&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;</code><code>src.remove(count, </code><code>null</code><code>);</code> <code>&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;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>catch</code><code>(error) { </code> <code>&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;</code>&nbsp; <code>&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;</code><code>src.remove(count);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**12 Listbox中的全选和非全选**

如果对于指定的listbox，下面的方法可以根据用户的需要，传入true或false,分别代表是全选listbox中的所有项目还是非全选所有项目，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>function</code>&nbsp;<code>listboxSelectDeselect(listID, isSelect) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>listbox = document.getElementById(listID);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>count=0; count &lt; listbox.options.length; count++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listbox.options[count].selected = isSelect;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

**13 在Listbox中项目的上下移动**

下面的代码，给出了在一个listbox中如何上下移动项目

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>function</code>&nbsp;<code>listbox_move(listID, direction) { </code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>listbox = document.getElementById(listID);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>selIndex = listbox.selectedIndex;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(-1 == selIndex) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"Please select an option to move."</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>increment = -1;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(direction == </code><code>'up'</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>increment = -1;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>increment = 1;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>((selIndex + increment) &lt; 0 ||</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>(selIndex + increment) &gt; (listbox.options.length-1)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>selValue = listbox.options[selIndex].value;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>selText = listbox.options[selIndex].text;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listbox.options[selIndex].value = listbox.options[selIndex + increment].value</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listbox.options[selIndex].text = listbox.options[selIndex + increment].text</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listbox.options[selIndex + increment].value = selValue;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listbox.options[selIndex + increment].text = selText;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listbox.selectedIndex = selIndex + increment;</code> <code>}</code> <code>//..</code> <code>//..</code> <code>&nbsp;</code>&nbsp; <code>listbox_move(</code><code>'countryList'</code><code>, </code><code>'up'</code><code>); </code><code>//move up the selected option</code> <code>listbox_move(</code><code>'countryList'</code><code>, </code><code>'down'</code><code>); </code><code>//move down the selected option</code> </td> 
 </tr> 
 </tbody> 
</table>

**14 在两个不同的Listbox中移动项目**

如果在两个不同的Listbox中，经常需要在左边的一个Listbox中移动项目到另外一个Listbox中去，下面是相关代码：

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>function</code>&nbsp;<code>listbox_moveacross(sourceID, destID) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>src = document.getElementById(sourceID);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>dest = document.getElementById(destID);</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>count=0; count &lt; src.options.length; count++) { </code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(src.options[count].selected == </code><code>true</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>option = src.options[count];</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>newOption = document.createElement(</code><code>"option"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newOption.value = option.value;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newOption.text = option.text;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newOption.selected = </code><code>true</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>try</code>&nbsp;<code>{ </code> <code>&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;</code><code>dest.add(newOption, </code><code>null</code><code>); </code><code>//Standard</code> <code>&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;</code><code>src.remove(count, </code><code>null</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code><code>catch</code><code>(error) { </code> <code>&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;</code><code>dest.add(newOption); </code><code>// IE only</code> <code>&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;</code><code>src.remove(count);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>count--;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>//..</code> <code>//..</code> <code>listbox_moveacross(</code><code>'countryList'</code><code>, </code><code>'selectedCountryList'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**15 快速初始化Javscript数组**

下面的方法，给出了一种快速初始化Javscript数组的方法，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code>&nbsp;<code>numbers = [];</code> <code>for</code><code>(</code><code>var</code>&nbsp;<code>i=1; numbers.push(i++)&lt;100;);</code> <code>//numbers = [0,1,2,3 ... 100]</code> </td> 
 </tr> 
 </tbody> 
</table>

使用的是数组的push方法

**16 截取指定位数的小数**

如果要截取小数后的指定位数，可以使用toFixed方法，比如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var num = 2.443242342; </code> <code>alert(num.toFixed(2));</code> </td> 
 </tr> 
 </tbody> 
</table>

而使用toPrecision(x)则提供指定位数的精度，这里的x是全部的位数，如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>num = 500.2349; </code> <code>result = num.toPrecision(4); </code><code>//输出500.2</code> </td> 
 </tr> 
 </tbody> 
</table>

**17 检查字符串中是否包含其他字符串**

下面的代码中，可以实现检查某个字符串中是否包含其他字符串。代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>if</code>&nbsp;<code>(!Array.prototype.indexOf) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Array.prototype.indexOf = </code><code>function</code><code>(obj, start) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>i = (start || 0), j = </code><code>this</code><code>.length; i &lt; j; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(</code><code>this</code><code>[i] === obj) { </code><code>return</code>&nbsp;<code>i; }</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>-1;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>&nbsp;</code>&nbsp; <code>if</code>&nbsp;<code>(!String.prototype.contains) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>String.prototype.contains = </code><code>function</code>&nbsp;<code>(arg) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>!!~</code><code>this</code><code>.indexOf(arg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

在上面的代码中重写了indexOf方法并定义了contains方法，使用的方法如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code>&nbsp;<code>hay = </code><code>"a quick brown fox jumps over lazy dog"</code><code>; </code> <code>var</code>&nbsp;<code>needle = </code><code>"jumps"</code><code>; </code> <code>alert(hay.contains(needle));</code> </td> 
 </tr> 
 </tbody> 
</table>

**18 去掉Javscript数组中的重复元素**

下面的代码可以去掉Javascript数组中的重复元素，如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>function</code>&nbsp;<code>removeDuplicates(arr) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>temp = {};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>i = 0; i &lt; arr.length; i++)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>temp[arr[i]] = </code><code>true</code><code>;</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>r = [];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>k </code><code>in</code>&nbsp;<code>temp)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>r.push(k);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>r;</code> <code>}</code> &nbsp; <code>//用法</code> <code>var</code>&nbsp;<code>fruits = [</code><code>'apple'</code><code>, </code><code>'orange'</code><code>, </code><code>'peach'</code><code>, </code><code>'apple'</code><code>, </code><code>'strawberry'</code><code>, </code><code>'orange'</code><code>];</code> <code>var</code>&nbsp;<code>uniquefruits = removeDuplicates(fruits);</code> <code>//输出 uniquefruits ['apple', 'orange', 'peach', 'strawberry'];</code> </td> 
 </tr> 
 </tbody> 
</table>

**19 去掉String中的多余空格**

下面的代码会为String增加一个trim()方法，代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>if</code>&nbsp;<code>(!String.prototype.trim) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>String.prototype.trim=</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>this</code><code>.replace(/^\s+|\s+$/g, </code><code>''</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>}</code> <code>&nbsp;</code>&nbsp; <code>//用法</code> <code>var</code>&nbsp;<code>str = </code><code>"&nbsp; some string&nbsp;&nbsp;&nbsp; "</code><code>;</code> <code>str.trim();</code> <code>//输出 str = "some string"</code> </td> 
 </tr> 
 </tbody> 
</table>

**20 Javascript中的重定向**

在Javascript中，可以实现重定向，方法如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>window.location.href = &lt;a href=</code><code>"<a href="http://viralpatel.net/" rel="nofollow">http://viralpatel.net</a>"</code><code>&gt;<a href="http://viralpatel.net/" rel="nofollow">http://viralpatel.net</a>&lt;/a&gt;;</code> </td> 
 </tr> 
 </tbody> 
</table>

**21 对URL进行编码**

有的时候，需要对URL中的传递的进行编码，方法如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var</code>&nbsp;<code>myOtherUrl = </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"<a href="http://example.com/index.html?url=" rel="nofollow">http://example.com/index.html?url=</a>"</code>&nbsp;<code>+ encodeURIComponent(myUrl);</code> </td> 
 </tr> 
 </tbody> 
</table>