前端开发常用代码片段（中篇）

Posted 2020-11-03 yang-hui

十一、检测浏览器是否支持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="会员卡号/手机号"/>

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;"/>

$("#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 = ‘‘;

    }

}