JavaScript应用经验

痛定思痛。 2021-09-12 03:08 271阅读 0赞

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参数**

**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'**

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

**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)**

**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、数组排序（升序、降序、随机）**

**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。