JS兼容及常用工具代码封装
作者: 图恩分类: 编程开发阅读: 895发布时间： 2020-06-13 12:11:18
本文目录：
1.格式化日期时间函数
2.获取对应id或者class的DOM对象
3.获取当前浏览器的类型
4.为任意一个元素绑定事件
5.为任意一个元素解绑事件
6.获取页面向上或者向左卷曲出去的距离
7.限制字符显示字数
8.ajax原生代码封装
9.比值函数
10.获取地址栏参数
11.移动端适配方案，rem快速布局
12.移动端PC端页面动态跳转解决方案
取min-max之间的随机数
14.获取传入参数的数据类型
15.深拷贝递归函数
16.让页面滚动到顶部
17.判断指定el是否在视口范围内
18.劫持粘贴板
19.将阿拉伯数字翻译成中文的大写数字
20.数组去重
21.检测密码强度
1.格式化日期时间函数
formatDates(dt)，只有一个参数，默认值是当前时间对象，返回值如“2020年4月2日23:46:20”
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
}
2.获取对应id或者class的DOM对象
如果传入的是class，则返回的是符合条件的第一个DOM元素。
function $i(id) {
return document.getElementById(id)
}
function $c(cls) {
return document.getElementsByClassName(cls)[0]
}
3.获取当前浏览器的类型
在处理一些兼容性问题的形式可以根据下面的判定进行处理。
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
}
4.为任意一个元素绑定事件
三个参数:元素,事件类型,事件处理函数
当项目需要兼容到IE8及以下的时候，绑定事件可以通过下面的函数进行兼容。
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
}
}
5.为任意一个元素解绑事件
三个参数:元素,事件类型,事件处理函数
当项目需要兼容到IE8及以下的时候，解绑事件可以通过下面的函数进行兼容。
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
}
}
6.获取页面向上或者向左卷曲出去的距离
下面封装的函数可以实现最大兼容性的获取到想要的值，返回值是一个对象，top属性对应的向上卷曲出去的距离值，left属性对应的向左卷曲出去的距离值。
function getScroll() {
return {
top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0
}
}
7.限制字符显示字数
方法需要传两个参数，第一个参数是需要传入的字符串，第二个参数是需要保留的字符串字数
function cutLongString(string, number) {
var newString = ''
if (string.length > number) {
return newString = string.sunstring(0, number) + '...'
} else {
return newString
}
}
8.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); // 此处为请求失败后的回调
}
})
代码封装
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('&');
}
9.比值函数
普通比值函数:直接把变量放入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;
}
}
}
10.获取地址栏参数
参数传入什么，返回的就是地址栏上对应的参数值
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; // 返回参数值
}
11.移动端适配方案，rem快速布局
PC端使用请将此代码注释掉
750px图，图片尺寸/100=rem尺寸
iphone调试开发，屏幕尺寸/100*2=rem尺寸
(function () {
var width = document.documentElement.clientWidth;
var html = document.querySelector("html");
html.style.fontSize = width / 7.5 + "px";
})();
12.移动端PC端页面动态跳转解决方案
将此JS代码放到跳板页面的头部
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
IsPC();
if (!IsPC()) {
//跳到移动端
window.location.href = '';
} else {
//跳到PC端
window.location.href = '';
}
13. 取min-max之间的随机数
函数始终返回介于 min（包括）和 max（不包括）之间的随机数
函数始终返回介于 min（包括）和 max（不包括）之间的随机整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
这个 JavaScript 函数始终返回介于 min 和 max（都包括）之间的随机整数：
function getRandomPlus(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
14.获取传入参数的数据类型
function gettype(o) {
var s = Object.prototype.toString.call(o)
var shorts = s.slice(8)
return shorts.replace(shorts.slice(-1), '').toLowerCase()
}
15.深拷贝递归函数
根据传递进来的参数，返回值是一个深拷贝出来的新数据
function deepCopy(obj) {
var newobj = obj.constructor === Array ? [] : {};
if (typeof obj !== 'object') {
return;
}
for (var i in obj) {
newobj[i] = typeof obj[i] === 'object' ?
deepCopy(obj[i]) : obj[i];
}
return newobj
}
16.让页面滚动到顶部
scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
}
17.判断指定el是否在视口范围内
需要指定的el全部都在视口范围内才会返回true，只要有任何一部分不在视口范围都会返回false
elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const {
top,
left,
bottom,
right
} = el.getBoundingClientRect();
const {
innerHeight,
innerWidth
} = window;
return partiallyVisible ?
((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :
top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}
18.劫持粘贴板
比如想要将类名为demo的文本内容复制到粘贴板，先获取到内容let demo = document.querySelector(".demo")，然后调用工具函数copyTextToClipboard(demo.innerText)
copyTextToClipboard = (value) => {
var textArea = document.createElement("textarea");
textArea.style.background = 'transparent';
textArea.value = value;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
19.将阿拉伯数字翻译成中文的大写数字
numberToChinese = (num) => {
var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");
var a = ("" + num).replace(/(^0*)/g, "").split("."),
k = 0,
re = "";
for (var i = a[0].length - 1; i >= 0; i--) {
switch (k) {
case 0:
re = BB[7] + re;
break;
case 4:
if (!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
.test(a[0]))
re = BB[4] + re;
break;
case 8:
re = BB[5] + re;
BB[7] = BB[5];
k = 0;
break;
}
if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
re = AA[0] + re;
if (a[0].charAt(i) != 0)
re = AA[a[0].charAt(i)] + BB[k % 4] + re;
k++;
}
if (a.length > 1) // 加上小数部分(如果有小数部分)
{
re += BB[6];
for (var i = 0; i < a[1].length; i++)
re += AA[a[1].charAt(i)];
}
if (re == '一十')
re = "十";
if (re.match(/^一/) && re.length == 3)
re = re.replace("一", "");
return re;
}
20.数组去重
unique = (arr) => {
if (Array.hasOwnProperty('from')) {
return Array.from(new Set(arr));
} else {
var n = {}, r = [];
for (var i = 0; i < arr.length; i++) {
if (!n[arr[i]]) {
n[arr[i]] = true;
r.push(arr[i]);
}
}
return r;
}
}
21.检测密码强度
当返回值为0时，提示密码长度不得少于6位数
checkPwd = (str) => {
let Lv = 0;
if (str.length < 6) {
return Lv
}
if (/[0-9]/.test(str)) {
Lv++
}
if (/[a-z]/.test(str)) {
Lv++
}
if (/[A-Z]/.test(str)) {
Lv++
}
if (/[\.|-|_]/.test(str)) {
Lv++
}
return Lv;
}
发表评论 (审核通过后显示评论)：