前端常用程式碼段
1、獲取裝置型別
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE核心 presto: u.indexOf('Presto') > -1, //opera核心 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/), //ios終端 android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端 iPhone: u.indexOf('iPhone') > -1 , //是否為iPhone或者QQHD瀏覽器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1, //是否web應該程式，沒有頭部與底部 weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增） qq: u.match(/\sQQ/i) == " qq", //是否QQ }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() };
2、獲取URL引數
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return r[2]; return null; }
3、格式化時間
function dataTime(str,time){ var date=new Date(time); var o = { "o+" : date.getMonth()+1, //月 "d+" : date.getDate(), //日 "h+" : date.getHours(), //時 "m+" : date.getMinutes(), //分 "s+" : date.getSeconds(), //秒 }; if(/(y+)/.test(str)) str=str.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); for(var k in o) if(new RegExp("("+ k +")").test(str)) str = str.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); return str; }
4、複製到貼上板
function copyToClipboard(text){ if(text.indexOf('-') !== -1) { var arr = text.split('-'); text = arr[0] + arr[1]; } var textArea = document.createElement("textarea"); textArea.style.position = 'fixed'; textArea.style.top = '0'; textArea.style.left = '0'; textArea.style.width = '2em'; textArea.style.height = '2em'; textArea.style.padding = '0'; textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; textArea.style.background = 'transparent'; // textArea.innerHTML=text; textArea.value=text; document.body.appendChild(textArea); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? '成功複製到剪貼簿' : '該瀏覽器不支援點選複製到剪貼簿'; humane.log(msg, { timeout: 3000, clickToClose: true, addnCls: 'humane' }); } catch (err) { humane.log('該瀏覽器不支援點選複製到剪貼簿', { timeout: 3000, clickToClose: true, addnCls: 'humane' }); } document.body.removeChild(textArea); }
5、去除字串首位空格function trimStr(str){ if(!str) return ""; return str.replace(/(^\s*)|(\s*$)/g,""); }
6、獲取cookie
function getCookie(name){ var cookie = document.cookie; //獲取cookie字串 var cookie = cookie.split("; "); //分割 //遍歷匹配 for ( var i = 0; i < cookie.length; i++) { var arr = cookie[i].split("="); if (arr[0] == name){ return arr[1]; } } return ""; }
7、過濾html標籤
function removeHTMLTag(str) { str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白 str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多餘空行 str=str.replace(/ /ig,'');//去掉 return str; },
8、ajax請求
function ajax(options){ var xhr = null; var params = formsParams(options.data); //建立物件 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest() } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 連線 if(options.type == "GET"){ xhr.open(options.type,options.url + "?"+ params,options.async); xhr.send(null) } else if(options.type == "POST"){ xhr.open(options.type,options.url,options.async); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(params); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ options.success(xhr.responseText); } } function formsParams(data){ var arr = []; for(var prop in data){ arr.push(prop + "=" + data[prop]); } return arr.join("&"); } } ajax({ url : "a.php", // url---->地址 type : "POST", // type ---> 請求方式 async : true, // async----> 同步：false，非同步：true data : { //傳入資訊 name : "張三", age : 18 }, success : function(data){ //返回接受資訊 console.log(data); } })
9、檢測瀏覽器是否支援canvas
function isSupportCanvas() {
return document.createElement('canvas').getContext ? true : false;
} // 測試，
開啟谷歌瀏覽器控制檯檢視結果 console.log(isSupportCanvas());
10、檢測是否是微信瀏覽器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
return !!(ua.match(/MicroMessenger/i)=="micromessenger" ? 1 : 0);
} // 測試 console.log(isWeiXinClient());
11、傳送驗證碼倒計時程式碼
<!-- dom -->
<input id="send" type="button" value="傳送驗證碼">
// 原生js版本
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);
}
// jQuery版本
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);
});
11、判斷是否是移動端及瀏覽器核心
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('移動端');
}