/**
*
* @authors 叽歪Q (1727728017@qq.com)
* @date 2018-08-23 10:00:10
* @version 1.0
*/
// -------------------------------------------------------------
// document.getElementsByClassName(cls) 不兼容 IE 6,7,8 封装重写
/**
* [myGetEleByClassName document.getElementsByClassName(cls) 不兼容 IE 6,7,8 封装重写]
* @param {String} cls [样式类名]
* @return {object} [数组]
*/
function myGetEleByClassName(cls){
var classList = [];
// 1.获取页面所有的标签
var allElement = document.getElementsByTagName("*");
// 2.遍历所有标签
for (var i = 0; i < allElement.length; i++) {
// 3.判断寻找包含目标类名cls的标签
var clslist = allElement[i].className.split(" ");
// 4.遍历类名数组
if(clslist.indexOf(cls)!=-1){
pushitem:for (var j = 0; j < clslist.length; j++) {
if (clslist[j]==cls) {
// 5.将寻找结果存入新数组
classList.push(allElement[i]);
break pushitem;
}
}
}
}
// 6.返回结果
return classList;
}
// -------------------------------------------------------------
// -------------------------------------------------------------
// 获取子节点元素 W3C制定的 oUl.childNodes 返回结果包含了文本(换行)节点 不好使 封装重写
/**
* [myChildNodes 获取子节点元素]
* @param {object} obj [节点对象]
* @return {object} [子节点数组]
*/
function myChildNodes(obj){
// 1.新建数组存结果
var childList = [];
// 2.获取目标对象的所以子节点(包括换行)
var oList = obj.childNodes;
// 3.遍历子节点数组
for (var i = 0; i < oList.length; i++) {
// 4.判断子节点类型 如果 nodeType==1 即为元素节点 则存入新数组
if (oList[i].nodeType==1) {
childList.push(oList[i])
}
}
// 5.返回结果
return childList;
}
// -------------------------------------------------------------
// -------------------------------------------------------------
// 将新节点插入到某节点后面 封装
/**
* [myInsertAfter 将新节点插入到某节点后面 封装]
* @param {object} parentElem [父节点]
* @param {object} newElem [新节点]
* @param {object} positionElem [插入位置]
* @return {object} []
*/
function myInsertAfter(parentElem,newElem,positionElem){
var insPosition = positionElem.nextElementSibling||positionElem.nextSibling;
parentElem.insertBefore(newElem, insPosition);
}
// -------------------------------------------------------------
// -------------------------------------------------------------
// 获取滚动条高宽
// document.documentElement.scrollTop; document.body.scrollTop; window.pageYOffset;
// 三者各不兼容 封装 重写获取滚动条高宽
// 页面会有 带DTD 标准的页面 document.documentElement.scrollTop
// 非标准 没有 DTD (没有声明头) document.body.scrollTop
// IE9以上 window.pageXOffset
//它的简单兼容写法
// document.documentElement.scrollTop||document.body.scrollTop
/**
* [myScroll 获取滚动条高宽 ]
* @return {[type]} []
*/
function myScroll(){
// ie9以上, google,火狐都能用,
if(window.pageXOffset!=null){
return {
"left":window.pageXOffset,
"top":window.pageYOffset
}
}else if(document.compatMode=="CSS1Compat"){
// 标准 DTD (有声明头)
return {
"left":document.documentElement.scrollLeft,
"top":document.documentElement.scrollTop
}
}
// 非标准 没有 DTD (没有声明头 (怪胎)),和ie 6 7 8
return {
"left":document.body.scrollLeft,
"top":document.body.scrollTop
}
}
// -------------------------------------------------------------
// -------------------------------------------------------------
// 获取style样式兼容写法
// window.getComputedStyle(elt: Element, pseudoElt?: DOMString) IE9+及非IE
// obj.currentStyle IE8及以下
// 兼容 封装 重写
/**
* [myGetStyle 获取style样式兼容写法]
* @param {object} obj [节点对象]
* @param {String} attr [样式属性]
* @return {String} [样式值]
*/
function myGetStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj, null)[attr];
}else{
return obj.currentStyle[attr];
}
}
// -------------------------------------------------------------
// -------------------------------------------------------------
// 事件监听器
// IE9及以上 其他浏览器
// box.addEventListener(“click”, func, false)
// box.removeEventListener(“click”, func)
// 在IE8及以下的浏览器中, 我们可以使用以下方式:
// box.attachEvent("onclick", fn); //添加事件
// box.detachEvent("onclick", fn); //移除事件
// 封装事件监听器, 兼容IE浏览器, 谷歌, 火狐
//添加事件
function myAddEvent(obj, type, fn, useCapture){
if (obj.addEventListener) {
obj.addEventListener(type, fn, useCapture);
}
else {
obj.attachEvent("on"+type, fn);
}
}
//移除事件
function myRemoveEvent(obj, type, fn, useCapture){
if (obj.removeEventListener) {
obj.removeEventListener(type, fn, useCapture);
}
else {
obj.detachEvent("on"+type, fn);
}
}
//调用
// addEvent(box, "click", fn, false);
// function fn(){
// alert("click 按钮1");
// }
// box.onclick = function(){
// removeEvent(box, "click", fn, false);
// }
// -------------------------------------------------------------
// -------------------------------------------------------------
function mySetCookie(name, value, date, path, domain, secure){
var strCookie = "";
if(name != null && name != ""){
strCookie += encodeURIComponent(name) + "=" + encodeURIComponent(value) + ";";
}
if(typeof(date) == "number"){
var date = new Date();
date.setDate(date.getDate() + Number(date));
strCookie += "expires=" + date + ";"
}
if(path){
strCookie += "path=" + path + ";"
}
if(domain){
strCookie += "domain=" + domain + ";"
}
if(secure){
strCookie += "secure";
}
document.cookie = strCookie;
return decodeURIComponent(document.cookie);
}
function myRemoveCookie(key){
mySetCookie(key, "", -1);
}
function myGetAllCookie(){
var obj = {};
var strCookie = decodeURIComponent(document.cookie);//name=value
//name=value; name1=value1
var arr = strCookie.split(";");
for(var i = 0; i < arr.length; i++){
var arr2 = arr[i].trim().split("=");
obj[arr2[0]] = arr2[1];
}
return obj;
}
function myGetKeyCookie(key){
var obj = myGetAllCookie();
return obj[key];
}
// -------------------------------------------------------------
// 匀速运动封装
function myLinear(ele, attr, target){
// 清除定时器,防止多次点击生成多个定时器
clearInterval(ele.timer);
// 开启定时器
ele.timer = setInterval(function(){
// 设置步长
var steps = parseInt(myGetStyle(ele,attr)) < target ? +10 : -10;
// 新的位置 = 原来位置 + 步长
ele.style[attr] = parseInt(myGetStyle(ele,attr)) + steps + "px";
// 如果 目前位置-目标位置 小于步长 则清除定时器 直接运动至target
if(Math.abs(parseInt(myGetStyle(ele,attr)) - target) <= Math.abs(steps)){
clearInterval(ele.timer);
ele.style[attr] = target + "px";
}
console.log('Running-----myLinear');
},40)
}
// 缓冲运动封装
function myEaseOut(ele,attr,target){
// 清除定时器,防止多次点击生成多个定时器
clearInterval(ele.timer);
// 开启定时器
ele.timer = setInterval(function(){
// 设置步长
var step = (target-parseInt(myGetStyle(ele,attr)))/10;
step = step>0 ? Math.ceil(step):Math.floor(step);
// 新的位置 = 原来位置 + 步长
ele.style[attr] = parseInt(myGetStyle(ele,attr)) + step + "px";
// 如果 目前位置==目标位置 则清除定时器
if (parseInt(myGetStyle(ele,attr))==target) {
clearInterval(ele.timer);
}
console.log('Running-----myEaseOut');
},30)
}
// function myMultiEaseOut(ele,obj){
// clearInterval(ele.timer);
// ele.timer = setInterval(function(){
// var status = true;
// for (var key in obj) {
// var current = parseInt(myGetStyle(ele,key));
// var target = parseInt(obj[key]);
// var step = (target - current)/10;
// step = step>0?Math.ceil(step):Math.floor(step);
// ele.style[key] = current + step + "px";
// if (target!=current) {
// status = false;
// }
// }
// if (status) {
// clearInterval(ele.timer);
// }
// console.log('Running-----myMultiEaseOut');
// },30)
// }
function myMultiLinear(ele,obj){
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var status = true;
for (var key in obj) {
var current = parseInt(myGetStyle(ele,key));
var target = parseInt(obj[key]);
var step = current < target ? +10 : -10;
ele.style[key] = current + step + "px";
if (Math.abs(current - target) > Math.abs(step)) {
status = false;
}
}
if (status) {
clearInterval(ele.timer);
}
console.log('Running-----myMultiLinear');
},30)
}
function myMultiEaseOut(ele,obj,secmini,fn){
secMini = secmini||30;
console.log(secmini,secMini)
//1. 清除定时器
clearInterval(ele.timer);
//2.开启定时器
ele.timer = setInterval(() =>{
var bflag = true;
for(var attr in obj){
var current = 0;
var target = 0;
if(attr == "opacity"){
current = myGetStyle(ele, attr) * 100;
target = obj[attr] * 100;
} else {
current = parseInt(myGetStyle(ele, attr));
target = parseInt(obj[attr]);
}
//2.1 步长=(目标-当前的位置)/10;
var step = (target - current) / 10;
//2.2 判断 步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//2.3 新的位置=当前的位置+步长
if(attr == "opacity"){
ele.style.opacity = (current + step) / 100;
ele.style.filter = `alpha(opacity=${(current + step)})`
} else if(attr == "zIndex"){
ele.style.zIndex = obj[attr];
} else {
ele.style[attr] = current + step + "px";
}
if(current != target){
bflag = false;
}
}
if(bflag){
clearInterval(ele.timer);
if(fn && typeof(fn) == "function"){// 如果 fn不等于 undefined ,就是 true
fn.bind(ele)(ele);
}
}
console.log(secMini)
},secMini)
}
function createXHR () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
return new ActiveXObject('Msxml.XMLHTTP');
}
// 使用 getAllResponseHeaders()获取整个响应头信息
// console.log(xhr.getAllResponseHeaders());
// 使用 getResponseHeader()获取单个响应头信息
// console.log(xhr.getResponseHeader('Content-Type'));
// 使用 setRequestHeader()设置单个请求头信息 放在open方法之后, send方法之前
// xhr.setRequestHeader(“MyHeader”, Zhang);
function ajax (obj) {
obj.type = obj.type?obj.type:'get';
obj.dataType = obj.dataType?obj.dataType:'json';
obj.async = obj.async?obj.async:true;
var xhr = createXHR();
return new Promise(function (resolve,reject) {
if (obj.type=='get') {
xhr.open('get',obj.url+"?"+getParam(obj.data),obj.async);
xhr.send(null);
}else{
xhr.open('post',obj.url,obj.async);
xhr.setRequestHeader('content-Type','application/x-www-form-urlencode');
xhr.open(getParam(obj.data));
}
if (obj.async) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
retRes();
}
}
}else{
retRes();
}
function retRes () {
if (xhr.status==200) {
if (obj.dataType=='json') {
resolve(JSON.parse(xhr.responseText));
}else if (obj.dataType=='xml') {
resolve(xhr.responseXML);
}else {
resolve(xhr.responseText);
}
}else{
reject({msg:'error'});
}
}
})
}
function getParam (data) {
var str = "";
for (var key in data) {
str += key+'='+data[key]+'&';
}
return str;
}
11.js中的兼容写法
最新推荐文章于 2022-08-31 08:30:39 发布