web前端，常用js方法封装
搜索总结了一些前端日常开发中，常用的一些方法封装
var myJs = {
/*
* 格式化日期
* @param dt 日期对象
* @returns {string} 返回值是格式化的字符串日期
*/
getDates: function(dt) {
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属性值返回指定标签对象
*/
my$: function(id) {
return document.getElementById(id);
},
/**
* 设置元素的文本内容
* @param element 任意元素
* @param text 任意文本内容
*/
setInnerText: function(element, text) {
if (typeof(element.textContent) == "undefined") {
element.innerText = text;
} else {
element.textContent = text;
}
},
/**
* 获取元素的文本内容
* @param element 任意元素
* @returns {*} 任意元素中的文本内容
*/
getInnerText: function(element) {
if (typeof(element.textContent) == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
},
/**
* 获取父级元素中的第一个子元素
* @param element 父级元素
* @returns {*} 父级元素中的子级元素
*/
getFirstElement: function(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 {*} 最后一个子元素
*/
getLastElement: function(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 {*} 前一个兄弟元素
*/
getPreviousElement: function(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 {*} 后一个兄弟元素
*/
getNextElement: function(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} 兄弟元素
*/
getSiblings: function(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;
},
/**
* 返回当前浏览器是什么类型的浏览器
*/
userBrowser: function() {
var browserName = navigator.userAgent.toLowerCase();
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
console.log("IE");
} else if (/firefox/i.test(browserName)) {
console.log("Firefox");
} else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {
console.log("Chrome");
} else if (/opera/i.test(browserName)) {
console.log("Opera");
} else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {
console.log("Safari");
} else {
console.log("不知道什么鬼!");
}
},
//缓动动画函数的封装
//获取元素样式计算后的值
getStyle: function(element, attr) {
return element.currentStyle ? element.currentStyle["attr"] : window.getComputedStyle(element, null)[attr];
},
//缓动动画函数的封装
animate: function(element, json, fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function() {
var flag = true;
for (var attr in json) {
if (attr == "opacity") {
var current = getStyle(element, attr) * 100;
var target = json[attr] * 100;
//每次移动的步数
var step = (target - current) / 10;
//每次移动步数都是整数(比较大的数字)
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step; //移动后的当前的像素
element.style[attr] = current / 100;
} else if (attr == "zIndex") {
element.style[attr] = json[attr];
} else {
var current = parseInt(getStyle(element, attr));
var target = json[attr];
//每次移动的步数
var step = (target - current) / 10;
//每次移动步数都是整数(比较大的数字)
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step; //移动后的当前的像素
element.style[attr] = current + "px";
}
if (current != target) { //到达目标后停止计时器
flag = false;
}
}
if (flag) {
clearInterval(element.timeId); //清理计时器
if (fn) {
fn();
}
}
//console.log("target:" + target + ",current:" + current + ",step:" + step);
}, 20);
},
/*去除空格*/
// type 1-所有空格 2-前后空格 3-前空格 4-后空格
trim: function(str, type) {
switch (type) {
case 1:
return str.replace(/\s+/g, "");
case 2:
return str.replace(/(^\s*)|(\s*$)/g, "");
case 3:
return str.replace(/(^\s*)/g, "");
case 4:
return str.replace(/(\s*$)/g, "");
default:
return str;
}
},
/*type
1:首字母大写
2：首页母小写
3：大小写转换
4：全部大写
5：全部小写
*/
//changeCase('asdasd',1)
//Asdasd
changeCase: function(str, type) {
function ToggleCase(str) {
var itemText = ""
str.split("").forEach(
function(item) {
if (/^([a-z]+)/.test(item)) {
itemText += item.toUpperCase();
} else if (/^([A-Z]+)/.test(item)) {
itemText += item.toLowerCase();
} else {
itemText += item;
}
});
return itemText;
}
switch (type) {
case 1:
return str.replace(/^(\w)(\w+)/, function(v, v1, v2) {
return v1.toUpperCase() + v2.toLowerCase();
});
case 2:
return str.replace(/^(\w)(\w+)/, function(v, v1, v2) {
return v1.toLowerCase() + v2.toUpperCase();
});
case 3:
return ToggleCase(str);
case 4:
return str.toUpperCase();
case 5:
return str.toLowerCase();
default:
return str;
}
},
/*字符串循环复制*/
//repeatStr(str->字符串, count->次数)
//repeatStr('123',3)
//"123123123"
repeatStr: function(str, count) {
var text = '';
for (var i = 0; i < count; i++) {
text += str;
}
return text;
},
//字符串替换(字符串,要替换的字符,替换成什么)
replaceAll: function(str, AFindText, ARepText) {
raRegExp = new RegExp(AFindText, "g");
return str.replace(raRegExp, ARepText);
},
/*替换 * */
//replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）)
replaceStr: function(str, regArr, type, ARepText) {
var regtext = '',
Reg = null,
replaceText = ARepText || '*';
//replaceStr('18819322663',[3,5,3],0)
//188*****663
//repeatStr是在上面定义过的（字符串循环复制），大家注意哦
if (regArr.length === 3 && type === 0) {
regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})'
Reg = new RegExp(regtext);
var replaceCount = repeatStr(replaceText, regArr[1]);
return str.replace(Reg, '$1' + replaceCount + '$2')
}
//replaceStr('asdasdasdaa',[3,5,3],1)
//***asdas***
else if (regArr.length === 3 && type === 1) {
regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}'
Reg = new RegExp(regtext);
var replaceCount1 = repeatSte(replaceText, regArr[0]);
var replaceCount2 = repeatSte(replaceText, regArr[2]);
return str.replace(Reg, replaceCount1 + '$1' + replaceCount2)
}
//replaceStr('1asd88465asdwqe3',[5],0)
//*****8465asdwqe3
else if (regArr.length === 1 && type == 0) {
regtext = '(^\\w{' + regArr[0] + '})'
Reg = new RegExp(regtext);
var replaceCount = repeatSte(replaceText, regArr[0]);
return str.replace(Reg, replaceCount)
}
//replaceStr('1asd88465asdwqe3',[5],1,'+')
//"1asd88465as+++++"
else if (regArr.length === 1 && type == 1) {
regtext = '(\\w{' + regArr[0] + '}$)'
Reg = new RegExp(regtext);
var replaceCount = repeatSte(replaceText, regArr[0]);
return str.replace(Reg, replaceCount)
}
},
/*检测字符串*/
//checkType('165226226326','phone')
//false
//大家可以根据需要扩展
checkType: function(str, type) {
switch (type) {
case 'email':
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
case 'phone':
return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
case 'tel':
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
case 'number':
return /^[0-9]$/.test(str);
case 'english':
return /^[a-zA-Z]+$/.test(str);
case 'chinese':
return /^[\u4E00-\u9FA5]+$/.test(str);
case 'lower':
return /^[a-z]+$/.test(str);
case 'upper':
return /^[A-Z]+$/.test(str);
default:
return true;
}
},
/*检测密码强度*/
//checkPwd('12asdASAD')
//3(强度等级为3)
checkPwd: function(str) {
var nowLv = 0;
if (str.length < 6) {
return nowLv
};
if (/[0-9]/.test(str)) {
nowLv++
};
if (/[a-z]/.test(str)) {
nowLv++
};
if (/[A-Z]/.test(str)) {
nowLv++
};
if (/[\.|-|_]/.test(str)) {
nowLv++
};
return nowLv;
},
/*随机码*/
//count取值范围0-36
//randomNumber(10)
//"2584316588472575"
//randomNumber(14)
//"9b405070dd00122640c192caab84537"
//Math.random().toString(36).substring(2);
//"83vhdx10rmjkyb9"
randomNumber: function(count) {
return Math.random().toString(count).substring(2);
},
/*查找字符串出现次数*/
countStr: function(str, strSplit) {
return str.split(strSplit).length - 1
},
//var strTest = 'sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967'
//countStr(strTest,'blog')
//6
/*数组去重*/
//ES6新增的Set数据结构，类似于数组，但是里面的元素都是唯一的 ，其构造函数可以接受一个数组作为参数
//let arr=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]
//let set = new Set(array);
//{1,2,6,3,5,69,66,7,4,8,9663}
//ES6中Array新增了一个静态方法from，可以把类似数组的对象转换为数组
//Array.from(set)
//[1,2,6,3,5,69,66,7,4,8,9663]
removeRepeatArray: function(arr) {
return Array.from(new Set(arr))
},
/*数组顺序打乱*/
upsetArr: function(arr) {
return arr.sort(function() {
return Math.random() - 0.5
});
},
/*数组最大值最小值*/
//这一块的封装，主要是针对数字类型的数组
maxArr: function(arr) {
return Math.max.apply(null, arr);
},
minArr: function(arr) {
return Math.min.apply(null, arr);
},
/*数组求和，平均值*/
//这一块的封装，主要是针对数字类型的数组
//求和
sumArr: function(arr) {
var sumText = 0;
for (var i = 0, len = arr.length; i < len; i++) {
sumText += arr[i];
}
return sumText;
},
//平均值,小数点可能会有很多位，这里不做处理，处理了使用就不灵活了！
covArr: function(arr) {
var sumText = sumArr(arr);
var covText = sumText / length;
return covText;
},
/*从数组中随机获取元素*/
//randomOne([1,2,3,6,8,5,4,2,6])
//8
//randomOne([1,2,3,6,8,5,4,2,6])
//1
randomOne: function(arr) {
return arr[Math.floor(Math.random() * arr.length)];
},
/*返回数组（字符串）出现的次数*/
//getEleCount('asd56+asdasdwqe','a')
//3
//getEleCount([1,2,3,4,5,66,77,22,55,22],22)
//2
getEleCount: function(obj, ele) {
var num = 0;
for (var i = 0, len = obj.length; i < len; i++) {
if (ele == obj[i]) {
num++;
}
}
return num;
},
/*返回数组（字符串）出现最多的元素和次数*/
//arr, rank->长度，默认为数组长度，ranktype，排序方式，默认降序
//getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])默认情况，返回所有元素出现的次数
//getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)传参（rank=3），只返回出现次数排序前三的
//getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)传参（ranktype=1,rank=null），升序返回所有元素出现次数
//getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)传参（rank=3，ranktype=1），只返回出现次数排序（升序）前三的
getCount: function(arr, rank,ranktype) {
var obj = {};
var k, arr1 = [];
//记录每一元素出现的次数
for (var i = 0, len = arr.length; i < len; i++) {
k = arr[i];
if (obj[k]) {
obj[k]++;
} else {
obj[k] = 1;
}
}
//保存结果{el-'元素'，count-出现次数}
for (var o in obj) {
arr1.push({
el: o,
count: obj[o]
});
}
//排序（降序）
arr1.sort(function(n1, n2) {
return n2.count - n1.count
});
//如果ranktype为1，则为升序，反转数组
if (ranktype === 1) {
arr1 = arr1.reverse();
}
var rank1 = rank || arr1.length;
return arr1.slice(0, rank1);
},
/*得到n1-n2下标的数组*/
//getArrayNum([0,1,2,3,4,5,6,7,8,9],5,9)
//[5, 6, 7, 8, 9]
//getArrayNum([0,1,2,3,4,5,6,7,8,9],2) 不传第二个参数,默认返回从n1到数组结束的元素
//[2, 3, 4, 5, 6, 7, 8, 9]
getArrayNum: function(arr, n1, n2) {
var arr1 = [],
len = n2 || arr.length - 1;
for (var i = n1; i <= len; i++) {
arr1.push(arr[i])
}
return arr1;
},
/*筛选数组*/
//删除值为'val'的数组元素
//removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')
//["aaa"] 带有'test'的都删除
//removeArrayForValue(['test','test1','test2','test','aaa'],'test')
//["test1", "test2", "aaa"] //数组元素的值全等于'test'才被删除
removeArrayForValue: function(arr, val, type) {
arr.filter(function(item) {
return type === '%' ? item.indexOf(val) !== -1 : item !== val
})
},
/*现金额大写转换*/
//upDigit(168752632)
//"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"
//upDigit(1682)
//"人民币壹仟陆佰捌拾贰元整"
//upDigit(-1693)
//"欠人民币壹仟陆佰玖拾叁元整"
upDigit: function(n) {
var fraction = ['角', '分', '厘'];
var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
var unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟']
];
var head = n < 0 ? '欠人民币' : '人民币';
n = Math.abs(n);
var s = '';
for (var i = 0; i < fraction.length; i++) {
s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
}
s = s || '整';
n = Math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++) {
var p = '';
for (var j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
//s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')+ unit[0][i] + s;
s = p + unit[0][i] + s;
}
return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
},
/*设置，获取URL参数*/
//获取url参数
//getUrlPrmt('segmentfault.com/write?draftId=122000011938')
//Object{draftId: "122000011938"}
getUrlPrmt: function(url) {
url = url ? url : window.location.href;
let _pa = url.substring(url.indexOf('?') + 1),
_arrS = _pa.split('&'),
_rs = {};
for (let i = 0, _len = _arrS.length; i < _len; i++) {
let pos = _arrS[i].indexOf('=');
if (pos == -1) {
continue;
}
let name = _arrS[i].substring(0, pos),
value = window.decodeURIComponent(_arrS[i].substring(pos + 1));
_rs[name] = value;
}
return _rs;
},
//设置url参数
//setUrlPrmt({'a':1,'b':2})
//a=1&b=2
setUrlPrmt: function(obj) {
let _rs = [];
for (let p in obj) {
if (obj[p] != null && obj[p] != '') {
_rs.push(p + '=' + obj[p])
}
}
return _rs.join('&');
},
/*随机返回一个范围内的数字*/
randomNumber: function(n1, n2) {
//randomNumber(5,10)
//返回5-10的随机整数，包括5，10
if (arguments.length === 2) {
return Math.round(n1 + Math.random() * (n2 - n1));
}
//randomNumber(10)
//返回0-10的随机整数，包括0，10
else if (arguments.length === 1) {
return Math.round(Math.random() * n1)
}
//randomNumber()
//返回0-255的随机整数，包括0，255
else {
return Math.round(Math.random() * 255)
}
},
/*适配rem*/
//使用方式很简单，比如效果图上，有张图片。宽高都是100px;
//样式写法就是
// img{
// width:1rem;
// height:1rem;
// }
//这样的设置，比如在屏幕宽度大于等于750px设备上，1rem=100px；图片显示就是宽高都是100px
//比如在iphone6(屏幕宽度：375)上，375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px;
getFontSize: function() {
var doc = document,
win = window;
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
if (clientWidth > 750) {
clientWidth = 750
}
//设置根元素font-size大小
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
//屏幕大小改变，或者横竖屏切换时，触发函数
win.addEventListener(resizeEvt, recalc, false);
//文档加载完成时，触发函数
doc.addEventListener('DOMContentLoaded', recalc, false);
},
};
将这些段代码单独放到一个js文件，通过myJs.method即可调用
// 获取格式化时间
var dateStr = myJs.getDates(dt);
可根据个人需求自行扩展、修改。
https://github.com/zhangqian00/
这是我的github地址，有一些我自己写的一些关于require、angular、vue等等的小项目，最近在学习Nodejs，非常欢迎大牛们来指点，交流，分享。
微信搜索公众号：前端很忙
获取更多干活分享，欢迎来搞！