前端开发常用代码片段（中篇）
十一、检测浏览器是否支持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 = ''; } }
