值得收藏的Javascript代码

1  Javascript数组转换为CSV格式

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

1
2
var fruits = [ 'apple' , 'peaches' , 'oranges' , 'mangoes' ];
var str = fruits.valueOf();

  输出:apple,peaches,oranges,mangoes

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

1
2
var fruits = [ 'apple' , 'peaches' , 'oranges' , 'mangoes' ];
var str = fruits.join( "|" );

  输出: apple|peaches|oranges|mangoes

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

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

1
2
var str = "apple, peaches, oranges, mangoes" ;
var fruitsArray = str.split( "," );

  输出 fruitsArray[0]: apple

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

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

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

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

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

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

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

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

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

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

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

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

  6 产生1到N的随机数

1
2
3
4
5
6
7
var random = Math.floor(Math.random() * N + 1);
 
//产生1到10之间的随机数
var random = Math.floor(Math.random() * 10 + 1);
 
//产生1到100之间的随机数
var random = Math.floor(Math.random() * 100 + 1);

  7 捕捉浏览器关闭的事件

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

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

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

  8  检查是否按了回退键

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

1
2
3
window.onbeforeunload = function () {
     return "You work will be lost." ;
};

  9  检查表单数据是否改变

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

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

  10  完全禁止使用后退键

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

1
2
3
4
5
6
7
<SCRIPT type= "text/javascript" >
     window.history.forward();
     function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload= "noBack();"
     onpageshow= "if (event.persisted) noBack();" onunload= "" >

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

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

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

  12  Listbox中的全选和非全选

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

1
2
3
4
5
6
function listboxSelectDeselect(listID, isSelect) {
     var listbox = document.getElementById(listID);
     for ( var count=0; count < listbox.options.length; count++) {
             listbox.options[count].selected = isSelect;
     }

  13 在Listbox中项目的上下移动

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

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

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

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

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
function listbox_moveacross(sourceID, destID) {
     var src = document.getElementById(sourceID);
     var dest = document.getElementById(destID);
   
     for ( var count=0; count < src.options.length; count++) {
   
         if (src.options[count].selected == true ) {

你可能感兴趣的:(JavaScript)