/** AJAX封装 原生js **/
ajax({
url:"https://open.weixin.qq.com/connect/qrconnect", //请求地址
type:"GET", //请求方式
data:{appid:"wx82670fae8b0fa28d",redirect_uri:"http://abc.lalabb.cn",response_type:"code",scope:"snsapi_login"}, // 请求参数
datatype:"json",
success:function(response,xml){
// 成功后执行的代码
console.log(response);
},
fail:function(status){
// 失败后执行的代码
}
});
function ajax(options){
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//xhr 兼容IE6
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
// 接收
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var status = xhr.status;
if(status>=200 && status < 300){
options.success && options.success(xhr.responseText, xhr.responseXML);
}else{
options.fail && options.fail(status);
}
}
}
// 链接 / 发送
if(options.type == "GET"){
xhr.open("GET",options.url+"?"+params,true);
xhr.send(null);
}else if(options.type == "POST"){
xhr.open("POST",options.url,true);
// 设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(params);
}
}
// 格式化参数
function formatParams(data){
var arr = [];
for(var name in data){
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v="+Math.random()).replace(".",""));
return arr.join("&");
}
/** 判断微信内置浏览器 **/
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == ‘micromessenger‘){
// 是微信浏览器执行
alert(‘true‘);
}else{
// 其他浏览器执行
alert(‘false‘);
}
}
/** 获取url参数 **/
function getUrlParam(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r!=null) return unescape(r[2]); return null; //返回参数值
}
/** 原生js get **/
var XHR=null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,这里早期IE的版本写法不同,具体可以查询下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if(XHR){
XHR.open("GET", "ajaxServer.action");
XHR.onreadystatechange = function () {
// readyState值说明
// 0,初始化,XHR对象已经创建,还未执行open
// 1,载入,已经调用open方法,但是还没发送请求
// 2,载入完成,请求已经发送完成
// 3,交互,可以接收到部分数据
// status值说明
// 200:成功
// 404:没有发现文件、查询或URl
// 500:服务器产生内部错误
if (XHR.readyState == 4 && XHR.status == 200) {
// 这里可以对返回的内容做处理
// 一般会返回JSON或XML数据格式
console.log(XHR.responseText);
// 主动释放,JS本身也会回收的
XHR = null;
}
};
XHR.send();
}
/** 判断是否为手机浏览器 **/
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.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android终端或者uc浏览器
iPhone: u.indexOf(‘iPhone‘) > -1 || u.indexOf(‘Mac‘) > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf(‘iPad‘) > -1, //是否iPad
webApp: u.indexOf(‘Safari‘) == -1 //是否web应该程序，没有头部与底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
// document.writeln("语言版本: "+browser.language);
// document.writeln(" 是否为移动终端: "+browser.versions.mobile);
// document.writeln(" ios终端: "+browser.versions.ios);
// document.writeln(" android终端: "+browser.versions.android);
// document.writeln(" 是否为iPhone: "+browser.versions.iPhone);
// document.writeln(" 是否iPad: "+browser.versions.iPad);
// document.writeln(navigator.userAgent);
/** 判断手机端还是pc端 **/
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
document.writeln("您的浏览设备为：");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
document.writeln("phone");
} else {
document.writeln("pc");
}
}
browserRedirect();
// 动态加载外部js文件
var flag = true;
if( flag ){
loadScript( "js/index.js" );
};
function loadScript( url ){
var script = document.createElement( "script" );
script.type = "type/javascipt";
script.src = url;
document.getElementsByTagName( "head" )[0].appendChild( script );
};
// 动态加载外部css样式
if( flag ){
loadCss( "css/base.css" );
};
function loadCss( url ){
var link = document.createElement( "link" );
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName( "head" )[0].appendChild( link );
};
// jquery 动态加载js后执行callback
<script src="/lib/js/jquery.min.js"></script>
<script>
var loadScripts= function (files, callback) {
var file = files.shift();
$.getScript(file, function () {
if (files.length) {
loadScripts(files, callback);
} else {
if (callback) {
callback();
}
}
});
}
loadScripts([‘test.js‘],function(){
alert(str);
})
</script>
// jsonp方式
function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四个属性
var callbackName = (‘jsonp_‘ + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName(‘head‘)[0];
var oScript = document.createElement(‘script‘);
oHead.appendChild(oScript);
window[callbackName] = function(json) { //创建jsonp回调函数
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先删除script标签，实际上执行的是success函数
};
oScript.src = options.url + ‘?‘ + callbackName; //发送请求
if (options.time) { //设置超时处理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超时" });
}, options.time);
}
};
// 使用方法：
jsonp({
url: ‘/b.com/b.json‘,
success: function(d){
//数据处理
},
time: 5000,
fail: function(){
//错误处理
}
});
// 调用视频全屏模式
function videoFull(docElm){
console.log("全屏模式");
// var docElm = document.getElementById(id);
//W3C
if(docElm.requestFullscreen){
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
// 退出全屏
function closeVideoFull(docElm){
if (document.exitFullscreen) {
document.exitFullscreen();
}else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// 截取固定数量的字符串
cutStr(str,36,6,10) 6个字或10字母和数字
function cutStr(str,codeNum,textNum,num){
var len = escape(str).length;
if(len>codeNum){
var s = str.substr(0,textNum)+"...";
return s;
}else if(len<codeNum){
if(str.length>num){
var s = str.substr(0,num)+"...";
return s;
}else{
return str;
}
}else{
return str;
}
};
// 去掉时间 2016-11-28 14:27:52 的秒
function cutTime(str){
str = str.replace(/-/g,"/");
var date = new Date(str );
var timeStamp = date.getTime();
var m = date.getMonth() + 1;
var d = date.getDate();
var start = str.indexOf(" ") + 1;
var end = str.lastIndexOf(":");
var newStr = m + "月" + d + "日" + str.substring(start,end);
// 时间格式 11月28日14:27 // 时间戳
return {"timeStr":newStr,"timeStamp":timeStamp};
}
// 无刷新修改url
function changeURL(){
var url = document.getElementById(‘url‘).value;
window.history.pushState({},0,‘http://‘+window.location.host+‘/‘+url);
}
// 按照汉语拼音字母排序
var array = [‘武汉‘, ‘北京‘, ‘上海‘, ‘天津‘];
array = array.sort(
function compareFunction(param1, param2) {
return param1.localeCompare(param2);
}
);
console.log(array);
//获取页面文件名和参数
function GetPageurl(){
var url=window.location.href;//获取完整URL地址
var tmp= new Array();//临时变量，用于保存分割字符串
tmp=url.split("/");//按照"/"分割
var cc = tmp[tmp.length-1];//获取最后一部分，即文件名和参数
tmp=cc.split("?");//把参数和文件名分割开
return tmp[0];//返回值
}
// 判断是否安装flash
function flashChecker() {
var hasFlash = 0; //是否安装了flash
var flashVersion = 0; //flash版本
var isIE = /*@[email protected]*/0; //是否IE浏览器
if (isIE) {
var swf = new ActiveXObject(‘ShockwaveFlash.ShockwaveFlash‘);
if (swf) {
hasFlash = 1;
VSwf = swf.GetVariable("$version");
flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
}
} else {
if (navigator.plugins && navigator.plugins.length > 0) {
var swf = navigator.plugins["Shockwave Flash"];
if (swf) {
hasFlash = 1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i) {
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return { f: hasFlash, v: flashVersion };
}
var fls = flashChecker();
var s = "";
if (fls.f) document.write("您安装了flash,当前flash版本为: " + fls.v + ".x");
else document.write("您没有安装flash");
// 简单提示弹出层
function dialog(str){
var layer=document.createElement("div");
layer.id="layer";
layer.innerHTML = str;
var style={
"background": "rgba(0, 0, 0, 0.4)",
"border-radius": "5px",
"bottom": "0",
"color": "#fff",
"font-size": "0.35rem",
"height": "1rem",
"left": "0",
"line-height": "1rem",
"margin": "auto",
"position": "fixed",
"right": "0",
"text-align": "center",
"top": "0",
"width": "2.8rem",
"z-index": "999"
}
for(var i in style){
layer.style[i]=style[i];
}
if(document.getElementById("layer")==null){
document.body.appendChild(layer);
setTimeout("document.body.removeChild(layer)",1500);
}
}
=========================================================================================================================
jquery ajax函数
我自己封装了一个ajax的函数，代码如下：
var Ajax = function(url, type success, error) {
$.ajax({
url: url,
type: type,
dataType: ‘json‘,
timeout: 10000,
success: function(d) {
var data = d.data;
success && success(data);
},
error: function(e) {
error && error(e);
}
});
};
// 使用方法：
Ajax(‘/data.json‘, ‘get‘, function(data) {
console.log(data);
});
jsonp方式
有时候我们为了跨域，要使用jsonp的方法，我也封装了一个函数：
function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四个属性
var callbackName = (‘jsonp_‘ + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName(‘head‘)[0];
var oScript = document.createElement(‘script‘);
oHead.appendChild(oScript);
window[callbackName] = function(json) { //创建jsonp回调函数
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先删除script标签，实际上执行的是success函数
};
oScript.src = options.url + ‘?‘ + callbackName; //发送请求
if (options.time) { //设置超时处理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超时" });
}, options.time);
}
};
// 使用方法：
jsonp({
url: ‘/b.com/b.json‘,
success: function(d){
//数据处理
},
time: 5000,
fail: function(){
//错误处理
}
});
常用正则验证表达式：
*****手机号验证
var validate = function(num) {
var exp = /^1[3-9]\d{9}$/;
return exp.test(num);
};
*****身份证号验证
var exp = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
*****ip验证
var exp = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
常用js函数：
**********返回顶部
$(window).scroll(function() {
var a = $(window).scrollTop();
if(a > 100) {
$(‘.go-top‘).fadeIn();
}else {
$(‘.go-top‘).fadeOut();
}
});
$(".go-top").click(function(){
$("html,body").animate({scrollTop:"0px"},‘600‘);
});
**********阻止冒泡
function stopBubble(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation(); //W3C阻止冒泡方法
}else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
**********全部替换replaceAll
var replaceAll = function(bigStr, str1, str2) { //把bigStr中的所有str1替换为str2
var reg = new RegExp(str1, ‘gm‘);
return bigStr.replace(reg, str2);
}
**********获取浏览器url中的参数值
var getURLParam = function(name) {
return decodeURIComponent((new RegExp(‘[?|&]‘ + name + ‘=‘ + ‘([^&;]+?)(&|#|;|$)‘, "ig").exec(location.search) || [, ""])[1].replace(/\+/g, ‘%20‘)) || null;
};
*********深度拷贝对象
function cloneObj(obj) {
var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
for(var key in obj){
if(o[key] != obj[key] ){
if(typeof(obj[key]) == ‘object‘ ){
o[key] = mods.cloneObj(obj[key]);
}else{
o[key] = obj[key];
}
}
}
return o;
}
********数组去重
var unique = function(arr) {
var result = [], json = {};
for (var i = 0, len = arr.length; i < len; i++){
if (!json[arr[i]]) {
json[arr[i]] = 1;
result.push(arr[i]); //返回没被删除的元素
}
}
return result;
};
**********判断数组元素是否重复
var isRepeat = function(arr) { //arr是否有重复元素
var hash = {};
for (var i in arr) {
if (hash[arr[i]]) return true;
hash[arr[i]] = true;
}
return false;
};
**********生成随机数
function randombetween(min, max){
return min + (Math.random() * (max-min +1));
}
************操作cookie
own.setCookie = function(cname, cvalue, exdays){
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = ‘expires=‘+d.toUTCString();
document.cookie = cname + ‘=‘ + cvalue + ‘; ‘ + expires;
};
own.getCookie = function(cname) {
var name = cname + ‘=‘;
var ca = document.cookie.split(‘;‘);
for(var i=0; i< ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ‘ ‘) c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return ‘‘;
};
*************知识技巧总结
数据类型
underfined、null、0、false、NaN、空字符串。他们的逻辑非结果均为true。
闭包格式
好处：避免命名冲突（全局变量污染）。
(function(a, b) {
console.log(a+b); //30
})(10, 20);
截取和清空数组
var arr = [12, 222, 44, 88];
arr.length = 2; //截取，arr = [12, 222];
arr.length = 0; //清空，arr will be equal to [].
获取数组的最大最小值
var numbers = [5, 45822, 120, -215];
var maxInNumbers = Math.max.apply(Math, numbers); //45822
var minInNumbers = Math.min.apply(Math, numbers); //-215
浮点数计算问题
0.1 + 0.2 == 0.3 //false
为什么呢？因为0.1+0.2等于0.30000000000000004。javascript的数字都遵循IEEE 754标准构建，在内部都是64位浮点小数表示。可以通过使用toFixed()来解决这个问题。
数组排序sort函数
var arr = [1, 5, 6, 3]; //数字数组
arr.sort(function(a, b) {
return a - b; //从小到大排
return b - a; //从大到小排
return Math.random() - 0.5; //数组洗牌
});
var arr = [{ //对象数组
num: 1,
text: ‘num1‘
}, {
num: 5,
text: ‘num2‘
}, {
num: 6,
text: ‘num3‘
}, {
num: 3,
text: ‘num4‘
}];
arr.sort(function(a, b) {
return a.num - b.num; //从小到大排
return b.num - a.num; //从大到小排
});
对象和字符串的转换
var obj = {a: ‘aaa‘, b: ‘bbb‘};
var objStr = JSON.stringify(obj); // "{"a":"aaa","b":"bbb"}"
var newObj = JSON.parse(objStr); // {a: "aaa", b: "bbb"}