获取元素对象下标方法
//方法一
function getElementIdx (item) {
var elements = item.parentNode.children;
for (var i = 0, len = elements.length; i < len; i++) {
if (item === elements[i]) {
return i;
}
}
}
console.log(getElementIdx(aLi, oActive));
//方法二
console.log([].indexOf.call(aLi, oActive))
封装获取元素的方法
function $ (ele) {
return document.querySelector(ele);
}
function $$ (ele) {
return document.querySelectorAll(ele);
}
获取元素的实际样式
function getStyle (obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
设置元素样式
//设置元素样式
function setStyle (dom, css) {
for (var key in css) {
dom['style'][key] = css[key];
}
}
设置任意的标签中间的任意文本内容
function setInnerText (element, text) {
var key = element.textContent == "undefined" ? 'innerText' : 'textContent';
element[key] = text;
}
事件监听兼容
/**
* @description: 函数的功效
* @param {Object} element 需要监听的DOM对象
* @param {String} type 事件类型 click mouseenter
* @param {Function} fn 监听绑定的回调函数
* @param {Boolean} capture true 捕获阶段监听 false 冒泡阶段监听
* @return {JSON} "remove":Function 返回一个用于解除监听的函数
* @Date: 2020-08-10 22:45:25
*/
function eventListener (element, type, fn, capture) {
capture = capture || false; //处理capture的默认值为 false
if (element.addEventListener) {
//标准浏览器写法
element.addEventListener(type, fn, capture);
} else {
//IE兼容写法
element.attachEvent("on" + type, fn);
}
return {
'remove': function () {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else {
element.detachEvent("on" + type, fn);
}
}
}
}
计算元素的位置
元素距离左边和右边的距离
function getPostion(element) {
var pos = {
left: 0,
top: 0
}
while (element.offsetParent) {
pos.left += element.offsetLeft;
pos.top += element.offsetTop;
element = element.offsetParent;
//如果有边框要计算入父级边框
pos.left += element.clientLeft;
pos.top += element.clientTop;
}
return pos;
}
鼠标滚轮滚动封装
function mousewheel (obj, fn) {
obj.onmousewheel === null ? obj.onmousewheel = fun : obj.addEventListener('DOMMouseScroll', fun, false);
function fun (e) {
var e = e || event,
num = 0;
if (e.wheelDelta) {
num = e.wheelDelta > 0 ? 1 : -1;
} else {
num = e.detail < 0 ? 1 : -1;
}
fn(num);
if (e.preventDefault) e.preventDefault();
return false;
}
}
//调用
var oDiv=document.getElementById('div');
mousewheel(oDiv,function(dir){
if(dir>0) alert('向上滚动');
if(dir<0) alert('往下滚动');
});
通道函数
//调用pipe 根据参数顺序 组装返回一个新的函数
function pipe(...funcs) {
return function (input) {
return funcs.reduce(function (acc, curr) {
return curr(acc);
}, input);
}
}
//通道函数用箭头函数简化
const pipe = (...funcs) => input => funcs.reduce((acc, curr) => curr(acc), input);
全屏功能
// 开启全屏
function openFullScreen (ele = document) {
const requestFullScreens = ['requestFullscreen', 'webkitRequestFullScreen', 'mozRequestFullScreen', 'msRequestFullscreen'];
for (let i = 0; i < requestFullScreens.length; i++) {
let key = requestFullScreens[i];
if (ele[key]) {
ele[key]();
return false;
}
}
}
// 退出全屏
function closeFullScreen () {
const exitFullScreens = ['exitFullscreen', 'webkitCancelFullScreen', 'mozCancelFullScreen', 'msExitFullscreen'];
for (let i = 0; i < exitFullScreens.length; i++) {
let key = exitFullScreens[i];
if (document[key]) {
document[key]();
return false;
}
}
}
// 是否是全屏状态
function isFullScreen () {
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
}
Storage
(function (w) {
class Storage {
constructor(type = "local") {
this.storage = w[`${type}Storage`]
this.history = {}
}
//设置存储项
setStorage (...args) {
const len = args.length;
if (len === 0) {
//如果无参数 return false终止后续
return false;
}
if (len === 2) {
//如果两个参数 并且两个参数都不是对象或者数组 以字符串形式setItem
if (args.every(item => typeof item !== 'object')) {
this.history[args[0]] = args[1];
this.storage.setItem(String(args[0]), String(args[1]));
}
//反馈设置项目 提供check
return {
[args[0]]: args[1]
}
}
if (len === 1) {
//如果1个参数 并且是对象 合并到this.history中并且 迭代设置每一项
if (Object.prototype.toString.call(args[0]) === "[object Object]") {
let obj = args[0];
Object.assign(this.history, obj);
//返回给调用者一个 Array 方便check存储项目
return Object.entries(obj).map(([key, value]) => {
this.storage.setItem(key, value);
return key;
})
}
}
//返回所有设置历史 供check
return this.history;
}
//获取存储项目
getStorage (...args) {
const len = args.length;
if (len === 0) {
//如果不传参数 返回所有的存储项目
return this.history;
}
if (len === 1 && Object.prototype.toString.call(args[0]) === "[object Array]" && args[0].length) {
//如果只有一个参数并且参数维数组并且数组长度不为0
let arr = args[0].slice();
//循环数组获取数组每一项对应的值 返回一个json key(数组每一项):value(数组项对应值)
return arr.reduce((acc, curr) => {
acc[curr] = this.storage.getItem(curr);
return acc;
}, {});
}
if (len === 1 && Object.prototype.toString.call(args[0]) === "[object String]" && args[0].length) {
//如果参数只有一个 并且类型是字符串 并且字符串长度不为0 获取对应项的值
//如果不传参数 返回所有的存储项目
return this.storage.getItem(args[0]);
}
}
//参数可以是字符串 数组
removeStorage (...args) {
//降维args参数数组 扁平化处理
args = args.flat(Infinity);
//循环删除每一项
args.forEach(item => {
if (typeof item !== 'object') {
if (this.history[item]) {
delete this.history[item]
}
this.setStorage.removeItem(String(item));
}
})
}
//清空所有的storage 并且清空history
clearStorage () {
this.history = {};
this.storage.clear();
}
}
w.Storage = Storage;
})(window);
随机数
/*
*@func: random
*@description: 返回数组随机项或者随机区间数字
*@param: {Array | Number} min Array随机数组源 Numer 区间最小值
*@param: { Number} max Numer 区间最小大值
*@return: {type} 返回随机数或者随机数组项目
*@author:
*/
function random(min, max) {
if (Array.isArray(min)) {
return min[~~(Math.random() * min.length)]
}
return min + ~~(Math.random() * (max - min));
}