转发链接:https://juejin.im/post/5edb6c6be51d4578a2555a9b

浏览器操作相关browser工具函数
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()}` };
121.cookie 获取
/** * @param {String} key 属性 */ export const cookieGet = (key) => { const cookieStr = unescape(document.cookie); const arr = cookieStr.split('; '); let cookieValue = ''; for (let i = 0; i < arr.length; i++) { const temp = arr[i].split('='); if (temp[0] === key) { cookieValue = temp[1]; break } } return cookieValue };
122.cookie 删除
/** * @param {String} key 属性 */ export const cookieRemove = (key) => { document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}` };
123.更多的工具函数
这里包含了平时可能常用的工具函数,包含数字,字符串,数组和对象等等操作。
124.金钱格式化,三位加逗号
/** * @param { number } num */ export const formatMoney = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
125.截取字符串并加身略号
export function subText(str, length) { if (str.length === 0) { return ''; } if (str.length > length) { return str.substr(0, length) + "..."; } else { return str; } }
126.获取文件base64编码
/** * @param file * @param format 指定文件格式 * @param size 指定文件大小(字节) * @param formatMsg 格式错误提示 * @param sizeMsg 大小超出限制提示 * @returns {Promise<any>} */ export function fileToBase64String(file, format = ['jpg', 'jpeg', 'png', 'gif'], size = 20 * 1024 * 1024, formatMsg = '文件格式不正确', sizeMsg = '文件大小超出限制') { return new Promise((resolve, reject) => { // 格式过滤 let suffix = file.type.split('/')[1].toLowerCase(); let inFormat = false; for (let i = 0; i < format.length; i++) { if (suffix === format[i]) { inFormat = true; break; } } if (!inFormat) { reject(formatMsg); } // 大小过滤 if (file.size > size) { reject(sizeMsg); } // 转base64字符串 let fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { let res = fileReader.result; resolve({base64String: res, suffix: suffix}); reject('异常文件,请重新选择'); } }) }
127.B转换到KB,MB,GB并保留两位小数
/** * @param { number } fileSize */ export function formatFileSize(fileSize) { let temp; if (fileSize < 1024) { return fileSize + 'B'; } else if (fileSize < (1024 * 1024)) { temp = fileSize / 1024; temp = temp.toFixed(2); return temp + 'KB'; } else if (fileSize < (1024 * 1024 * 1024)) { temp = fileSize / (1024 * 1024); temp = temp.toFixed(2); return temp + 'MB'; } else { temp = fileSize / (1024 * 1024 * 1024); temp = temp.toFixed(2); return temp + 'GB'; } }
128.base64转file
/** * @param { base64 } base64 * @param { string } filename 转换后的文件名 */ export const base64ToFile = (base64, filename )=> { let arr = base64.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let suffix = mime.split('/')[1] ;// 图片后缀 let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) };
129.base64转blob
/** * @param { base64 } base64 */ export const base64ToBlob = base64 => { let arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); };
130.blob转file
/** * @param { blob } blob * @param { string } fileName */ export const blobToFile = (blob, fileName) => { blob.lastModifiedDate = new Date(); blob.name = fileName; return blob; }; 复制代码
本篇未完结,请留意下一篇


还没有评论,来说两句吧...