JS兼容代码及常用代码封装common.js
//格式化日期======↓
// formatDates(dt)
//获取指定的标签对象
// my$(id)
// my$c(cls)
//设置元素的文本内容
// setInnerText(element, text)
// 获取元素的文本内容
// getInnerText(element)
// 获取父级元素中的第一个子元素
// getFirstElement(element)
// 获取父级元素中的最后一个子元素
// getLastElement(element)
// 获取某个元素的前一个兄弟元素
// getPreviousElement(element)
// 获取某个元素的后一个兄弟元素
// getNextElement(element)
// 获取某个元素的所有兄弟元素
// getSiblings(element)
// 返回当前浏览器是什么类型的浏览器
// userBrowser()
// 为任意一个元素绑定事件:元素,事件类型,事件处理函数
// addEventListener(element, type, fn)
// 为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
// removeEventListener(element, type, fn)
// 获取的是页面向上或者向左卷曲出去的距离的值,返回的是对象
// getScroll()
// 返回不大于指定的字数的新字符串
// cutLongString(string, number)
// ajax原生封装
// ajax({
// url: "", //请求地址
// type: 'GET', //请求方式
// async:true,//同步异步设置
// timeout:6000,//超时设置
// data: {
// name: '',
// age: '',
// email: ''
// }, //请求参数
// success: function(response, xml) {
// console.log(response); // 此处执行请求成功后的回调
// },
// error: function(status) {
// console.log('状态码为' + status); // 此处为请求失败后的回调
// }
// })
//获取指定范围内的随机数
//getRandomNumber(min,max)
//验证表单输入(失去焦点的时候验证)
//checkInput(input,reg)
// 字符串的首尾两端去空格
// 字符串直接调用.trim(),返回值是一个去掉空格后的新字符串
// 累加器函数,reduce方法的回调函数
// 普通比值函数,直接把变量放入sort方法中即可
//升序compareUp,降序compareDown
// 比值函数(排序对象数组,参数传入要进行排序依据的属性名)
// 获取地址栏参数
//getParamString(name)
/**
* 格式化日期
* @param dt 日期对象
* @returns {string} 返回值是格式化的字符串日期
*/
function formatDates(dt) {
dt = dt || new Date()
var str = ""//存储时间的字符串
//获取年
var year = dt.getFullYear()
//获取月
var month = dt.getMonth() + 1
//获取日
var day = dt.getDate()
//获取小时
var hour = dt.getHours()
//获取分钟
var min = dt.getMinutes()
//获取秒
var sec = dt.getSeconds()
month = month < 10 ? "0" + month : month
day = day < 10 ? "0" + day : day
hour = hour < 10 ? "0" + hour : hour
min = min < 10 ? "0" + min : min
sec = sec < 10 ? "0" + sec : sec
str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec
return str
}
/**
* 获取指定标签对象
* @param id 标签的id属性值
* @returns {Element}根据id属性值返回指定标签对象
*/
function my$(id) {
return document.getElementById(id)
}
function my$c(cls) {
return document.getElementsByClassName(cls)[0]
}
/**
* 设置元素的文本内容
* @param element 任意元素
* @param text 任意文本内容
*/
function setInnerText(element, text) {
if (typeof (element.textContent) == "undefined") {
element.innerText = text
} else {
element.textContent = text
}
}
/**
* 获取元素的文本内容
* @param element 任意元素
* @returns {*} 任意元素中的文本内容
*/
function getInnerText(element) {
if (typeof (element.textContent) == "undefined") {
return element.innerText
} else {
return element.textContent
}
}
/**
* 获取父级元素中的第一个子元素
* @param element 父级元素
* @returns {*} 父级元素中的子级元素
*/
function getFirstElement(element) {
if (element.firstElementChild) {
return element.firstElementChild
} else {
var node = element.firstChild
while (node && node.nodeType != 1) {
node = node.nextSibling
}
return node
}
}
/**
* 获取父级元素中的最后一个子元素
* @param element 父级元素
* @returns {*} 最后一个子元素
*/
function getLastElement(element) {
if (element.lastElementChild) {
return element.lastElementChild
} else {
var node = element.lastChild
while (node && node.nodeType != 1) {
node = node.previousSibling
}
return node
}
}
/**
* 获取某个元素的前一个兄弟元素
* @param element 某个元素
* @returns {*} 前一个兄弟元素
*/
function getPreviousElement(element) {
if (element.previousElementSibling) {
return element.previousElementSibling
} else {
var node = element.previousSibling
while (node && node.nodeType != 1) {
node = node.previousSibling
}
return node
}
}
/**
* 获取某个元素的后一个兄弟元素
* @param element 某个元素
* @returns {*} 后一个兄弟元素
*/
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling
} else {
var node = element.nextSibling
while (node && node.nodeType != 1) {
node = node.nextSibling
}
return node
}
}
/**
* 获取某个元素的所有兄弟元素
* @param element 某个元素
* @returns {Array} 兄弟元素
*/
function getSiblings(element) {
if (!element) return
var elements = []
var ele = element.previousSibling
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele)
}
ele = ele.previousSibling
}
ele = element.nextSibling
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele)
}
ele = ele.nextSibling
}
return elements
}
/**
* 返回当前浏览器是什么类型的浏览器
*/
function userBrowser() {
var broType = ''
var browserName = navigator.userAgent.toLowerCase()
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
broType = "IE"
} else if (/firefox/i.test(browserName)) {
broType = "Firefox"
} else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {
broType = "Chrome"
} else if (/opera/i.test(browserName)) {
broType = "Opera"
} else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {
broType = "Safari"
} else {
broType = "Unknown"
}
return broType
}
//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element, type, fn) {
if (element.addEventListener) {
//支持
element.addEventListener(type, fn, false)
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn)
} else {
element["on" + type] = fn
}
}
//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false)
} else if (element.detachEvent) {
element.detachEvent("on" + type, fn)
} else {
element["on" + type] = null
}
}
/**
* 获取的是页面向上或者向左卷曲出去的距离的值,返回的是对象
* @returns {{top: (Number|number), left: (Number|number)}}
*/
function getScroll() {
return {
top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0
}
}
// 将需要限制字数的字符串传入
// 方法需要传两个参数,第一个参数是需要传入的字符串,第二个参数是需要保留的字符串字数
function cutLongString(string, number) {
var newString = ''
if (string.length > number) {
return newString = string.sunstring(0, number) + '...'
} else {
return newString
}
}
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || 'json';
options.async = options.async || true;
options.timeout = options.timeout || 5000;//超时处理,默认5s
var params = getParams(options.data);
var timeoutFlag = null;
var xhr;
var that = this;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.onreadystatechange = function () {
if (options.dataType === 'json') {
if (xhr.readyState == 4) {
window.clearTimeout(that.timeoutFlag);
var status = xhr.status;
if (status >= 200 && status < 300) {
// 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(status);
}
}
} else {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
window.clearTimeout(that.timeoutFlag);
var oScript = document.createElement('script');
document.body.appendChild(oScript);
var callbackname = 'ajaxCallBack'
oScript.src = options.url + "?" + params + '&callback=' + callbackname;
window['ajaxCallBack'] = function (data) {
options.success(data);
document.body.removeChild(oScript);
};
}
}
};
if (options.type == 'GET') {
xhr.open("GET", options.url + '?' + params, options.async);
xhr.send(null)
} else if (options.type == 'POST') {
xhr.open('POST', options.url, options.async);
if (options.contentType == "undefined" || options.contentType == null) {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);
} else {
xhr.setRequestHeader('Content-Type', options.contentType);
xhr.send(JSON.stringify(options.data));
}
}
this.timeoutFlag = window.setTimeout(function () {//计时器,超时后处理
window.clearTimeout(that.timeoutFlag);
//options.error("timeout");
xhr.abort();
}.bind(this), options.timeout);
}
function getParams(data) {
var arr = [];
for (var param in data) {
arr.push(encodeURIComponent(param) + '=' + encodeURIComponent(data[param]));
}
return arr.join('&');
}
//获取指定范围内的随机数
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
//验证表单输入
function checkInput(input,reg) {
//文本框注册失去焦点的事件
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="正确了";
this.nextElementSibling.style.color="green";
}else{
this.nextElementSibling.innerText="输入格式错误,请重新输入";
this.nextElementSibling.style.color="red";
}
};
}
// 字符串的首尾两端去空格
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ""); };
// 累加器函数,reduce方法的回调函数
function summarize(accumulator, number) {
return accumulator + number;
}
// 普通比值函数,直接把变量放入sort方法中即可
var compareUp = function (a, b) {//升序比值函数
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
}
var compareDown = function (a, b) {//降序比值函数
if (a < b) {
return 1;
} else if (a > b) {
return -1;
} else {
return 0;
}
}
// 比值函数(排序对象数组,参数传入要进行排序的属性名)
var compareObjArr = function (prop) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}
// 获取地址栏参数
function getParamString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); // 匹配目标参数
if (r != null) return unescape(r[2]); return null; // 返回参数值
}