269个JavaScript工具函数,助你提升工作效率(4)
91.返回当前url
export const currentURL = () => window.location.href;
92.获取url参数(第一种)
/**
* @param {*} name
* @param {*} origin
*/
export function getUrlParam(name, origin = null) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = null;
if (origin == null) {
r = window.location.search.substr(1).match(reg);
} else {
r = origin.substr(1).match(reg);
}
if (r != null) return decodeURIComponent(r[2]);
return null;
}
93.获取url参数(第二种)
/**
* @param {*} name
* @param {*} origin
*/
export function getUrlParams(name, origin = null) {
let url = location.href;
let temp1 = url.split('?');
let pram = temp1[1];
let keyValue = pram.split('&');
let obj = {};
for (let i = 0; i < keyValue.length; i++) {
let item = keyValue[i].split('=');
let key = item[0];
let value = item[1];
obj[key] = value;
}
return obj[name];
}
94.修改url中的参数
/**
* @param { string } paramName
* @param { string } replaceWith
*/
export function replaceParamVal(paramName,replaceWith) {
var oUrl = location.href.toString();
var re=eval('/('+ paramName+'=)([^&]*)/gi');
location.href = oUrl.replace(re,paramName+'='+replaceWith);
return location.href;
}
95.删除url中指定的参数
/**
* @param { string } name
*/
export function funcUrlDel(name){
var loca =location;
var baseUrl = loca.origin + loca.pathname + "?";
var query = loca.search.substr(1);
if (query.indexOf(name)>-1) {
var obj = {};
var arr = query.split("&");
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("=");
obj[arr[i][0]] = arr[i][1];
}
delete obj[name];
var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
return url
}
}
96.获取窗口可视范围的高度
export function getClientHeight() {
let clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
return clientHeight;
}
97.获取窗口可视范围宽度
export function getPageViewWidth() {
let d = document,
a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
return a.clientWidth;
}
98.获取窗口宽度
export function getPageWidth() {
let g = document,
a = g.body,
f = g.documentElement,
d = g.compatMode == "BackCompat" ? a : g.documentElement;
return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}
99.获取窗口尺寸
export function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
// ie8及其以下
if (document.compatMode === "BackCompat") {
// 怪异模式
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
// 标准模式
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
100.获取滚动条距顶部高度
export function getPageScrollTop() {
let a = document;
return a.documentElement.scrollTop || a.body.scrollTop;
}
101.获取滚动条距左边的高度
export function getPageScrollLeft() {
let a = document;
return a.documentElement.scrollLeft || a.body.scrollLeft;
}
102.开启全屏
/**
* @param {*} element
*/
export function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
103.关闭全屏
export function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
104.返回当前滚动条位置
export const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
105.滚动到指定元素区域
export const smoothScroll = element =>{
document.querySelector(element).scrollIntoView({
behavior: 'smooth'
});
};
106.平滑滚动到页面顶部
export const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
107.http跳转https
export const httpsRedirect = () => {
if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
};
108.检查页面底部是否可见
export const bottomVisible = () =>{
return document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight || document.documentElement.clientHeight);
};
109.打开一个窗口
/**
* @param { string } url
* @param { string } windowName
* @param { number } width
* @param { number } height
*/
export function openWindow(url, windowName, width, height) {
var x = parseInt(screen.width / 2.0) - width / 2.0;
var y = parseInt(screen.height / 2.0) - height / 2.0;
var isMSIE = navigator.appName == "Microsoft Internet Explorer";
if (isMSIE) {
var p = "resizable=1,location=no,scrollbars=no,width=";
p = p + width;
p = p + ",height=";
p = p + height;
p = p + ",left=";
p = p + x;
p = p + ",top=";
p = p + y;
window.open(url, windowName, p);
} else {
var win = window.open(
url,
"ZyiisPopup",
"top=" +
y +
",left=" +
x +
",scrollbars=" +
scrollbars +
",dialog=yes,modal=yes,width=" +
width +
",height=" +
height +
",resizable=no"
);
eval("try { win.resizeTo(width, height); } catch(e) { }");
win.focus();
}
}
110.自适应页面(rem)
/**
* @param { number } width
*/
export function AutoResponse(width = 750) {
const target = document.documentElement;
target.clientWidth >= 600
? (target.style.fontSize = "80px")
: (target.style.fontSize = target.clientWidth / width * 100 + "px");
}
日期工具date工具函数
111.浏览器存储相关storage工具函数
主要为浏览器存储方面的工具函数,大部分搬运自大神火狼1
112.localStorage 存贮
/**
* 目前对象值如果是函数 、RegExp等特殊对象存贮会被忽略
* @param { String } key 属性
* @param { string } value 值
*/
export const localStorageSet = (key, value) => {
if (typeof (value) === 'object') value = JSON.stringify(value);
localStorage.setItem(key, value)
};
113.localStorage 获取
/**
* @param {String} key 属性
*/
export const localStorageGet = (key) => {
return localStorage.getItem(key)
};
114.localStorage 移除
/**
* @param {String} key 属性
*/
export const localStorageRemove = (key) => {
localStorage.removeItem(key)
};
115.localStorage 存贮某一段时间失效
/**
* @param {String} key 属性
* @param {*} value 存贮值
* @param { number } expire 过期时间,毫秒数
*/
export const localStorageSetExpire = (key, value, expire) => {
if (typeof (value) === 'object') value = JSON.stringify(value);
localStorage.setItem(key, value);
setTimeout(() => {
localStorage.removeItem(key)
}, expire)
};
116.sessionStorage 存贮
/**
* @param {String} key 属性
* @param {*} value 值
*/
export const sessionStorageSet = (key, value) => {
if (typeof (value) === 'object') value = JSON.stringify(value);
sessionStorage.setItem(key, value)
};
117.sessionStorage 获取
/**
* @param {String} key 属性
*/
export const sessionStorageGet = (key) => {
return sessionStorage.getItem(key)
};
118.sessionStorage 删除
/**
* @param {String} key 属性
*/
export const sessionStorageRemove = (key) => {
sessionStorage.removeItem(key)
};
119.sessionStorage 存贮某一段时间失效
/**
* @param {String} key 属性
* @param {*} value 存贮值
* @param {String} expire 过期时间,毫秒数
*/
export const sessionStorageSetExpire = (key, value, expire) => {
if (typeof (value) === 'object') value = JSON.stringify(value);
sessionStorage.setItem(key, value);
setTimeout(() => {
sessionStorage.removeItem(key)
}, expire)
};
120.cookie 存贮
/**
* @param {String} key 属性
* @param {*} value 值
* @param { String } expire 过期时间,单位天
*/
export const cookieSet = (key, value, expire) => {
const d = new Date();
d.setDate(d.getDate() + expire);
document.cookie = `${key}=${value};expires=${d.toUTCString()}`
};