JavaScript应用经验

1、获取Url中的参数

2、控制文本框只能输入数字

3、删除左右两端的空格

4、将日期转换成"yyyy-mm-dd"格式

5、JavaScript获取用户使用的浏览器类型

6、JavaScript获取浏览器高宽度

7、JavaScript中读取JSON的方法

8、解决使用ajax方式对select控件进行填充时，ie下会出现样式BUG

9、js实现复制到剪贴板(IE, firefox) 

10、JQuery实现组合键[Ctrl+Enter]提交表单

11、计算器

12、数组排序（升序、降序、随机）

13、随机整数(指定范围内的随机整数)

14、字符串截取

15、判断是否IE浏览器（包含IE11）

1、获取URL中的request参数

function getUrlParam(name) 
{ 
    var reg = new RegExp("(^|&)"+   name   +"=([^&]*)(&|$)");   
    var r = window.location.search.substr(1).match(reg);
    if (r!=null)
    {
        return decodeURIComponent(r[2]);
    } 
    else
    {
        return ""; 
     } 
}  

2、控制文本框只能输入数字

function _OnlyAllowNumKeyup(o) {
    o.value = o.value.replace(/[^0-9.]/g, '');
}
//调用<input type="text" onkeyup="_OnlyAllowNumKeyup(this)" />

3、删除左右两端的空格

function Trim(str)
{
    return str.replace(/(^\s*)|(\s*$)/g, "");
}

4、将日期转换成"yyyy-mm-dd"格式 第二个参数为返回类型传入'ym':yyyy-mm,'md':mm-dd,默认为'yyyy-mm-dd'

function ConvertDateFormat(strDate, sye) {
    if (strDate == null || strDate == "" || strDate == "0") {
        return ("");
    }
    else {
        try {
            var ExDate = new Date(strDate.replace(/-/g, "/"));
            var yyyy = ExDate.getFullYear();
            var mm = ExDate.getMonth() + 1; mm = mm < 10 ? "0" + mm : mm;
            var dd = ExDate.getDate(); dd = dd < 10 ? "0" + dd : dd;
            switch (sye) {
                case "ym":
                    return yyyy + "-" + mm;
                    break;
                case "md":
                    return mm + "-" + dd;
                    break;
                default:
                    return yyyy + "-" + mm + "-" + dd;
                    break;
            }
        }
        catch (e) {
            return ("")
        }
    }
}

5、JavaScript获取用户使用的浏览器类型

function GetClientOs()
{
     var OsObject = "";
    if(navigator.userAgent.indexOf("MSIE")>0) {
         return "MSIE";  
    }
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
         return "Firefox";
    }
    if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
         return "Safari";
    }  
    if(isCamino=navigator.userAgent.indexOf("Camino")>0){
         return "Camino";
    }
    if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
         return "Gecko";
    } 
}

6、JavaScript获取浏览器高宽度

//获取浏览器高宽度
function AlertSize() {
    var myWidth = 0, myHeight = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;

    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    window.alert('Width = ' + myWidth);
    window.alert('Height = ' + myHeight);
}

7、JavaScript中读取JSON的方法

//使用JavaScript提供的eval()函数
var strJSON = "{name:'json name'}";//得到的JSON
var obj = eval( "(" + strJSON + ")" );//转换后的JSON对象
alert(obj.name);//json name

8、解决使用ajax方式对select控件进行填充时，ie下会出现样式BUG

//绑定商铺下拉列表(实例代码段)
function BindShopList() {
    //绑定商铺列表数据
    if (result.ShopList != null) {
        tmp = "";
        for (var i = 0; i < result.ShopList.length; i++) {
            tmp += "<option value='" + result.ShopList[i].ShopID + "'>" + result.ShopList[i].ShopName + "</option>";
        }
        $("#selShop").css('visibility', 'hidden').append(tmp).css('visibility', 'visible');  //(1)解决数据绑定时样式BUG（这里使用了JQuery）
    }
    //数据绑定完成后，选中设定的商铺
    if (result.ShopID > 0) {
        setTimeout(function() { $("#selShop").val(result.ShopID); }, 500);   //(2)利用延时解决IE6下出错问题 
    }
}

9、js实现复制到剪贴板(IE, firefox)

function copyToClipboard(meintext) {
    if (window.clipboardData) {
        window.clipboardData.setData("Text", meintext);
    }
    else if (window.netscape) {
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        } catch (e) {
            alert("被浏览器拒绝！请在浏览器地址栏输入'about:config'，回车\n，将'signed.applets.codebase_principal_support'设置为'true'");
        } 
        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip) return;
        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
        if (!trans) return;
        trans.addDataFlavor('text/unicode');
        var str = new Object();
        var len = new Object();
        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
        var copytext = meintext;
        str.data = copytext;
        trans.setTransferData("text/unicode", str, copytext.length * 2);
        var clipid = Components.interfaces.nsIClipboard;
        if (!clip) return false;
        clip.setData(trans, null, clipid.kGlobalClipboard);
    }
    alert("复制成功");
    return false;
}

10、JQuery实现组合键[Ctrl+Enter]提交表单

$("#comment_text").keydown(function(even) {
    if (even.ctrlKey && even.which == 13) {
        $('#comment_form').submit();
    }
});

11、计算器

//计算器
//参数：a:算数1、b:算数2、operator：运算符、prec：四舍五入（小数点位数）
function calculator(a, b, operator, prec) {
    try {
        var La = a.toString().split('.')[1].length;
    } catch (e) {
        var La = 0;
    }
    try {
        var Lb = b.toString().split('.')[1].length;
    } catch (e) {
        var Lb = 0;
    }
    var A = a.toString().replace('.', ''),
        B = b.toString().replace('.', ''),
        C = Math.pow(10, Math.max(La, Lb)),
        D;
    switch (operator) {
        case '+':
            D = (Number(a) * C + Number(b) * C) / C;
            break;
        case '-':
            D = (Number(a) * C - Number(b) * C) / C;
            break;
        case '*':
            D = Number(A) * Number(B) / Math.pow(10, La + Lb);
            break;
        case '/':
            D = Number(A) / Number(B) * Math.pow(10, Lb - La);
            break;
        default:
            D = Number(a);
    }
    if (prec) {
        return D.toFixed(prec);
    } else {
        return D;
    }
}

//如何使用
var num1 = 1.2;
var num2 = 3;
calculator(num1, num2, "+", 2);  //4.20
calculator(num1, num2, "*", 2);  //3.60

12、数组排序（升序、降序、随机）

var arrA = [6, 2, 4, 3, 5, 1];  
//数组升序排序
Array.prototype.AscSort = function() {
    return this.sort(function(x, y) {
    if (x > y)
        return 1;
    if (x < y)
        return -1;
    });
};

//数组降序排序
Array.prototype.DescSort = function() {
    return this.sort(function(x, y) {
    if (x > y)
        return -1;
    if (x < y)
        return 1;
    });
};

//数组随机排序
Array.prototype.RandomSort = function() {
    return this.sort(function() {
        return Math.random() > 0.5 ? -1 : 1;
    });
};

//升序排序
arrA.AscSort();
document.writeln(arrA);
document.writeln("<br>");
//降序排序
arrA.DescSort();
document.writeln(arrA);
document.writeln("<br>");
//随机排序
arrA.RandomSort();
document.writeln(arrA);  

13、随机整数(指定范围内的随机整数)

//随机整数(指定范围内的随机整数)
function fRandomBy(under, over) {
    switch (arguments.length) {
        case 1: return parseInt(Math.random() * under + 1);
        case 2: return parseInt(Math.random() * (over - under + 1) + under);
        default: return 0;
    }
}

document.write(fRandomBy(1, 100)); //输出指定范围内的随机数的随机整数 

14、字符串截取

//截取
String.prototype.len = function() {
    return this.replace(/[^\x00-\xff]/g, "**").length
};
String.prototype.cut = function(l) {
    if (this.len() <= l) {
        return this
    } else {
        for (var i = Math.floor(l / 2); i < this.len(); i++) {
            if (this.substr(0, i).len() >= l) {
                return this.substr(0, i)
            }
        }
    }
};

//使用
var str = "中文字abcdefghijk";
alert(str.cut(7));   //结果：“中文字a”

15、判断是否IE浏览器（包含IE11）

/**
 * 判断是否IE浏览器
 */
function isIE()
{  
    if(!!window.ActiveXObject || "ActiveXObject" in window)
    {
   	return true;
    }
    else
    {
    	return false;
    }     
} 

一些说明如下：

（1）IE早些版本时，IE10及以下，window.ActiveXObject 返回一个对象，!window.ActiveXObject则变为false，!!window.ActiveXObject则为true，因为是或||符号后续无需再判断，返回true。

（2）IE11中，window.ActiveXObject返回undefine，!window.ActiveXObject则变成了true，!!window.ActiveXObject则变成了false，进入 "window.ActiveXObject" in window判断，该判断条件在IE11下返回true。

（3）其他非IE浏览器，如chrome，firefox，window.ActiveXObject都是undefine，!!window.ActiveXObject都是返回的false，而 "window.ActiveXObject" in window也是返回false，因此上述判断函数在非IE浏览器中返回的都是false。