js常用方法总结

我就是我 2022-05-15 01:07 292阅读 0赞

//一、检测浏览器是否支持svg
    function isSupportSVG () {
        var SVG_NS = 'http://www.w3.org/2000/svg';
        return !!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect;
    }
    console.log(isSupportSVG());
    //二、检测浏览器是否支持canvas
    function isSupportCanvas () {
        if ( document.createElement('canvas').getContext ) {
            return true;
        }
        else {
            return false;
        }
    }
    console.log(isSupportCanvas());
    
    
    //三、检测是否是微信浏览器
    function isWeiXinClient () {
        var ua = navigator.userAgent.toLowerCase();
        if ( ua.match(/MicroMessenger/i) == "micromessenger" ) {
            return true;
        }
        else {
            return false;
        }
    }
    alert(isWeiXinClient());
    
    
    //四、检测是否移动端及浏览器内核
    var browser = {
        versions : function () {
            var u = navigator.userAgent;
            return {
                trident : u.indexOf('Trident') > -1, //IE内核
                presto : u.indexOf('Presto') > -1, //opera内核
                webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko : u.indexOf('Firefox') > -1, //火狐内核Gecko
                mobile : !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
                ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
                android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
                iPhone : u.indexOf('iPhone') > -1, //iPhone
                iPad : u.indexOf('iPad') > -1, //iPad
                webApp : u.indexOf('Safari') > -1 //Safari
            };
        }
    };
    if ( browser.versions.mobile() || browser.versions.ios() || browser.versions.android() 
    || browser.versions.iPhone() || browser.versions.iPad() ) {
        alert('移动端');
    }
    
    
    //五、检测是否电脑端 / 移动端
    var browser = {
        versions : function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            var sUserAgent = navigator.userAgent;
            return {
                trident : u.indexOf('Trident') > -1,
                presto : u.indexOf('Presto') > -1,
                isChrome : u.indexOf("chrome") > -1,
                isSafari : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
                isSafari3 : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
                webKit : u.indexOf('AppleWebKit') > -1,
                gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                mobile : !!u.match(/AppleWebKit.*Mobile.*/),
                ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                iPhone : u.indexOf('iPhone') > -1,
                iPad : u.indexOf('iPad') > -1,
                iWinPhone : u.indexOf('Windows Phone') > -1
            };
        }()
    };
    
    if ( browser.versions.mobile || browser.versions.iWinPhone ) {
        window.location = "http:/www.baidu.com/m/";
    }
    
    
    //六、检测浏览器内核
    function getInternet () {
        if ( navigator.userAgent.indexOf("MSIE") > 0 ) {
            return "MSIE";       //IE浏览器
        }
        if ( isFirefox = navigator.userAgent.indexOf("Firefox") > 0 ) {
            return "Firefox";     //Firefox浏览器
        }
        if ( isSafari = navigator.userAgent.indexOf("Safari") > 0 ) {
            return "Safari";      //Safan浏览器
        }
        if ( isCamino = navigator.userAgent.indexOf("Camino") > 0 ) {
            return "Camino";   //Camino浏览器
        }
        if ( isMozilla = navigator.userAgent.indexOf("Gecko/") > 0 ) {
            return "Gecko";    //Gecko浏览器
        }
    }
    
    
    //七、强制移动端页面横屏显示
    $(window).on("orientationchange", function ( event ) {
        if ( event.orientation == 'portrait' ) {
            $('body').css('transform', 'rotate(90deg)');
        }
        else {
            $('body').css('transform', 'rotate(0deg)');
        }
    });
    $(window).orientationchange();
    
    
    //八、电脑端页面全屏显示
    function fullscreen ( element ) {
        if ( element.requestFullscreen ) {
            element.requestFullscreen();
        }
        else if ( element.mozRequestFullScreen ) {
            element.mozRequestFullScreen();
        }
        else if ( element.webkitRequestFullscreen ) {
            element.webkitRequestFullscreen();
        }
        else if ( element.msRequestFullscreen ) {
            element.msRequestFullscreen();
        }
    }
    fullscreen(document.documentElement);
    
    
    //九、获得 / 失去焦点
    //1、JavaScript实现
    <input id = "i_input" type = "text" value = "会员卡号/手机号" />
    // JavaScript
    window.onload = function () {
        var oIpt = document.getElementById("i_input");
        if ( oIpt.value == "会员卡号/手机号" ) {
            oIpt.style.color = "#888";
        }
        else {
            oIpt.style.color = "#000";
        };
        oIpt.onfocus = function () {
            if ( this.value == "会员卡号/手机号" ) {
                this.value = "";
                this.style.color = "#000";
                this.type = "password";
            }
            else {
                this.style.color = "#000";
            }
        };
    
        oIpt.onblur = function () {
            if ( this.value == "" ) {
                this.value = "会员卡号/手机号";
                this.style.color = "#888";
                this.type = "text";
            }
        };
    }
    
    //2、jQuery实现
    < input type = "text" class= "oldpsw" id = "showPwd" value = "请输入您的注册密码" / >
    < input type = "password" name = "psw" class= "oldpsw" id = "password" value = "" style = "display:none;" / >
    // jQuery
        $("#showPwd").focus(function () {
            var text_value = $(this).val();
            if ( text_value == '请输入您的注册密码' ) {
                $("#showPwd").hide();
                $("#password").show().focus();
            }
        });
    $("#password").blur(function () {
        var text_value = $(this).val();
        if ( text_value == "" ) {
            $("#showPwd").show();
            $("#password").hide();
        }
    });
    
    
    //十、获取上传文件大小
    < input type = "file" id = "filePath" onchange = "getFileSize(this)" / >
    // 兼容IE9低版本
        function getFileSize ( obj ) {
            var filesize;
            if ( obj.files ) {
                filesize = obj.files[ 0 ].size;
            }
            else {
                try {
                    var path, fso;
                    path = document.getElementById('filePath').value;
                    fso = new ActiveXObject("Scripting.FileSystemObject");
                    filesize = fso.GetFile(path).size;
                }
                catch ( e ) {
                    // 在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size
                    console.log(e.message); // Automation 服务器不能创建对象
                    filesize = 'error'; // 无法获取
                }
            }
            return filesize;
        }
    
    
    //十一、限制上传文件类型
    
    //1、高版本浏览器
    < input type = "file" name = "filePath" accept = ".jpg,.jpeg,.doc,.docxs,.pdf" / >
    //2、限制图片
    < input type = "file" class = "file" value = "上传" accept = "image/*" >
    //3、低版本浏览器
    < input type = "file" id = "filePath" onchange = "limitTypes()" >
        /* 通过扩展名，检验文件格式。
         * @parma filePath{string} 文件路径
         * @parma acceptFormat{Array} 允许的文件类型
         * @result 返回值{Boolen}：true or false
         */
        function checkFormat ( filePath, acceptFormat ) {
            var resultBool = false,
                ex = filePath.substring(filePath.lastIndexOf('.') + 1);
            ex = ex.toLowerCase();
            for ( var i = 0; i < acceptFormat.length; i++ ) {
                if ( acceptFormat[ i ] == ex ) {
                    resultBool = true;
                    break;
                }
            }
            return resultBool;
        };
    
    function limitTypes () {
        var obj = document.getElementById('filePath');
        var path = obj.value;
        var result = checkFormat(path, [ 'bmp', 'jpg', 'jpeg', 'png' ]);
        if ( !result ) {
            alert('上传类型错误，请重新上传');
            obj.value = '';
        }
    }
    
    
    //十二、正则表达式
    //验证邮箱
    /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
    
    //验证手机号
    /^1[3|5|8|7]\d{9}$/
    
    //验证URL
    /^http:\/\/.+\./
    
    //验证身份证号码
    /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
    
    //匹配字母、数字、中文字符
    /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
    
    //匹配中文字符
    /[\u4e00-\u9fa5]/
    
    //匹配双字节字符(包括汉字)
    /[^\x00-\xff]/
    
    
    //十三、限制字符数
    <input id="txt" type="text">
    //字符串截取
        function getByteVal ( val, max ) {
            var returnValue = '';
            var byteValLen = 0;
            for ( var i = 0; i < val.length; i++ ) {
                if ( val[ i ].match(/[^\x00-\xff]/ig) != null ) byteValLen += 2;
                else byteValLen += 1;
                if ( byteValLen > max ) break;
                returnValue += val[ i ];
            }
            return returnValue;
        };
    
    $('#txt').on('keyup', function () {
        var val = this.value;
        if ( val.replace(/[^\x00-\xff]/g, "**").length > 14 ) {
            this.value = getByteVal(val, 14);
        }
    });
    
    
    //十四、验证码倒计时
    <input id="send" type="button" value="发送验证码">
    // JavaScript
    var times = 60, // 时间设置60秒
        timer = null;
    document.getElementById('send').onclick = function () {
        // 计时开始
        timer = setInterval(function () {
            times--;
            if ( times <= 0 ) {
                send.value = '发送验证码';
                clearInterval(timer);
                send.disabled = false;
                times = 60;
            }
            else {
                send.value = times + '秒后重试';
                send.disabled = true;
            }
        }, 1000);
    };
    
    var times = 60,
        timer = null;
    $('#send').on('click', function () {
        var $this = $(this);
        // 计时开始
        timer = setInterval(function () {
            times--;
            if ( times <= 0 ) {
                $this.val('发送验证码');
                clearInterval(timer);
                $this.attr('disabled', false);
                times = 60;
            }
            else {
                $this.val(times + '秒后重试');
                $this.attr('disabled', true);
            }
        }, 1000);
    });
    
    
    //十五、时间倒计时
    <p id="_lefttime"></p>
    var times = 60,timer = null;
    
    
    
    //十六、倒计时跳转
    <div id="showtimes"></div>
    // 设置倒计时秒数
    var t = 10;
    // 显示倒计时秒数
    function showTime () {
        t -= 1;
        document.getElementById('showtimes').innerHTML = t;
        if ( t == 0 ) {
            location.href = 'error404.asp';
        }
        //每秒执行一次 showTime()
        setTimeout("showTime()", 1000);
    }
    showTime();
    
    
    //十七、时间戳、毫秒格式化
    function formatDate ( now ) {
        var y = now.getFullYear();
        var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
        var d = now.getDate();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
    }
    
    var nowDate = new Date(1442978789184);
    alert(formatDate(nowDate));
    
    
    //十八、当前日期
    var calculateDate = function () {
        var date = new Date();
        var weeks = [ "日", "一", "二", "三", "四", "五", "六" ];
        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" +
            date.getDate() + "日 星期" + weeks[ date.getDay() ];
    };
    $(function () {
        $("#dateSpan").html(calculateDate());
    });
    
    
    //十九、判断周六 / 周日
    <p id = "text" > < / p >
        function time ( y, m ) {
            var tempTime = new Date(y, m, 0);
            var time = new Date();
            var saturday = new Array();
            var sunday = new Array();
    
            for ( var i = 1; i <= tempTime.getDate(); i++ ) {
                time.setFullYear(y, m - 1, i);
                var day = time.getDay();
                if ( day == 6 ) {
                    saturday.push(i);
                }
                else if ( day == 0 ) {
                    sunday.push(i);
                }
            }
            var text = y + "年" + m + "月份" + "<br />"
                + "周六：" + saturday.toString() + "<br />"
                + "周日：" + sunday.toString();
            document.getElementById("text").innerHTML = text;
        };
    time(2018, 5);

**三十、AJAX调用错误处理**

当 Ajax 调用返回 404 或 500 错误时，就执行错误处理程序。如果没有定义处理程序，其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

![format_png][]

**三十一、链式插件调用**

jQuery 允许“链式”插件的方法调用，以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。

![format_png 1][]

通过使用链式，可以改善

![format_png 2][]

还有一种方法是在（前缀$）变量中高速缓存元素

![format_png 3][]

链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[format_png]: /images/20220515/07b952fba9fc4d7bb042e71a3365ac7e.png
[format_png 1]: /images/20220515/34598e821d9a49f993237c92bdb84d42.png
[format_png 2]: /images/20220515/b6f1b3067d6e4931817274877501fbb3.png
[format_png 3]: /images/20220515/c1ab096407f64c578f30efcc77bd6aec.png
[20191229112121499.png]: /images/20220515/415e6c8b4352403798e92a0af3d9c09c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220515/392601426f044bdcb3eca3ee6a6c46d7.png