十一、檢測瀏覽器是否支援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 = ``; } }