网站专业优化公司,网站建设的内容有哪些,网站排名优化软件电话,wordpress微博评论箱文章目录 前端项目常用函数封装(一)判断两个数组是否有相同元素 返回相同元素#xff08;数组#xff09;判断hex颜色值是深色还是浅色随机生成深浅样色 js判断是手机端还是移动端使用UA判断使用媒体查询判断 fetch直接读文件内容#xff0c;解决乱码问题下载文件将字符串下… 文章目录 前端项目常用函数封装(一)判断两个数组是否有相同元素 返回相同元素数组判断hex颜色值是深色还是浅色随机生成深浅样色 js判断是手机端还是移动端使用UA判断使用媒体查询判断 fetch直接读文件内容解决乱码问题下载文件将字符串下载保存为 txt fasta fa csv tsv等文本文件下载文件文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题 还有excel下载 移动端和pc端js判断手指的上滑下滑左滑右滑事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动vue2、vue3全局挂载js点击按钮复制文本方法 前端项目常用函数封装(一) 判断两个数组是否有相同元素 返回相同元素数组
//判断两个数组是否有相同元素
export const ishasSameElement (arr1: string[], arr2: string[]) {// 使用Set数据结构来存储数组的唯一元素let set1 new Set(arr1);let set2 new Set(arr2);// 使用Intersection方法找出两个集合的交集如果交集不为空那么就存在共享的元素let commonElements new Set([...set1].filter((x) set2.has(x)));return Array.from(commonElements);
};如果上面看不懂话的就用for循环遍历吧
判断hex颜色值是深色还是浅色
注意这里一定要是128不要写0.5仔细看看下面的公式就不会相信0.5了 1*0.50.5了哈哈哈
export const hexIsDark (hex: string) {// 将Hex颜色转换为RGB颜色let result /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);let rgb result? {r: parseInt(result[1], 16),g: parseInt(result[2], 16),b: parseInt(result[3], 16),}: null;let brightness: number 0;if (rgb) brightness 0.299 * rgb.r 0.587 * rgb.g 0.114 * rgb.b;return brightness 128;
};
随机生成深浅样色
const randomColor () {let deepColor [];let lightColor [];for (let i 0; i 100; i) {let color # parseInt(Math.random() * 0xffffff).toString(16);if (hexIsDark(color)) {deepColor.push(color);} else {lightColor.push(color);}}console.log(deepColor, deepColor);console.log(lightColor, lightColor);};js判断是手机端还是移动端
推荐使用UA去判断
使用UA判断
UA(UserAgent)是指HTTP请求头中的一部分用于标识客户端的一些信息比如用户的设备类型、浏览器型号等等。因此我们可以通过判断UA中的关键字来确定页面访问者的设备类型。下面是实现的代码 const isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);if (isMobile) {console.log(当前在手机端);} else {console.log(当前在PC端);}//判断是否在微信浏览器var ua navigator.userAgent.toLowerCase();var isWeixin ua.indexOf(micromessenger) ! -1;if (isWeixin) { // 微信浏览器}else{ //普通浏览器if (isMobile) {console.log(当前在手机端);} else {console.log(当前在PC端);}}使用媒体查询判断
获取当前浏览器的屏幕宽度 if (window.innerWidth 1023) {console.log(当前在手机端);} else {console.log(当前在PC端);}fetch直接读文件内容解决乱码问题 fetch(‘文件路径’).then(async (r) {const text await r.text();console.log(text);});下载文件
将字符串下载保存为 txt fasta fa csv tsv等文本文件
/*** 下载txt fasta fa等文本文件* param text 文本内容* param fileName 文件名*/
export const saveTextAsFile (text: any, filename: string) {const blob new Blob([text], { type: text/plain });const url URL.createObjectURL(blob);const a document.createElement(a);a.href url;a.download filename;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);
};//或者 /*** 下载文件* param url 文件路径* param fileName 文件名称*/
import { saveAs } from file-saver;
//安装一下 file-saver包
export const downloadTxt (url: string, fileName: string) {const fileBlob fetch(url).then((r) r.blob())const blob new Blob([\uFEFFfileBlob ], { type: text/plain;charsetutf-8 });saveAs(blob, fileName);
};下载文件
/*** 下载文件* param content 文件内容* param fileName 文件名称*/
export const download (content: string, fileName: string) {const link document.createElement(a);link.href encodeURI(content);link.download fileName;document.body.appendChild(link);link.click();document.body.removeChild(link);
};文件链接转文件流下载–主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题 还有excel下载
import { saveAs } from file-saver;/*** 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题 还有excel下载* param url 文件链接* param fileName 文件名;* param type 文件类型;* param fn 进度回调方法;*/export const saveFileToLink (url: string, fileName: string) {let xhr new XMLHttpRequest();url url.includes(https:) ? url.replace(https:, ) : url.replace(http:, ); //资源路径动态获取请求的方式HTTPS或HTTPxhr.open(get, url, true);xhr.setRequestHeader(Content-Type, application/);xhr.setRequestHeader(If-Modified-Since, 0); //解决缓存问题,每次请求都去请求服务器获取最新数据xhr.responseType blob;xhr.onprogress function (e) {//文件下载进度// if (fn typeof fn function) {// fn(e); //监听文件下载进度;// }};xhr.onload function () {if (this.status 200) {//接受二进制文件流let blob this.response;saveAs(blob, fileName);}};xhr.send();
};移动端和pc端js判断手指的上滑下滑左滑右滑事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动
const scrollFunc (e) {e e || window.event;let wheelDelta e.wheelDelta ? e.wheelDelta : -e.detail * 50;if (wheelDelta 0) {console.log(wheelDelta 滑轮向上滚动);let dom document.querySelector(.header-contanier);dom.style.display flex;let dom2 document.querySelector(.navNull);dom2.style.display block;}if (wheelDelta 0) {console.log(wheelDelta 滑轮向下滚动);let dom document.querySelector(.header-contanier);let dom2 document.querySelector(.navNull);dom.style.display none;dom2.style.display none;}
};
if (document.addEventListener) {//火狐使用DOMMouseScroll绑定document.addEventListener(DOMMouseScroll, scrollFunc, false);
}
//其他浏览器直接绑定滚动事件
window.onmousewheel document.onmousewheel scrollFunc; //IE/Opera/Chrome// touchstart: //手指放到屏幕上时触发
// touchmove: //手指在屏幕上滑动式触发
// touchend: //手指离开屏幕时触发
// touchcancel: //系统取消touch事件的时候触发这个好像比较少用
let startX: number 0;
let startY: number 0;
document.addEventListener(touchstart,(e) {e.preventDefault();// console.log(e);startX e.changedTouches[0].pageX;startY e.changedTouches[0].pageY;},false,
);
// document.addEventListener(
// touchend,
// (e) {
// e.preventDefault();
// console.log(e);
// },
// false,
// );
document.addEventListener(touchmove,(e) {// e.preventDefault();let moveEndX e.changedTouches[0].pageX;let moveEndY e.changedTouches[0].pageY;let X moveEndX - startX;let Y moveEndY - startY;if (Math.abs(X) Math.abs(Y) X 0) {console.log(right);} else if (Math.abs(X) Math.abs(Y) X 0) {console.log(left);} else if (Math.abs(Y) Math.abs(X) Y 0) {console.log(bottom);} else if (Math.abs(Y) Math.abs(X) Y 0) {console.log(top);} else {alert(just touch);}},false,
);vue2、vue3全局挂载
vue3全局挂载 推荐使用provide/inject不推荐使用globalProperties最新版本的已经弃用了
main.ts中
import { createApp } from vue;
import App from ./App.vue;
import router from ./router;
import { store } from ./store;
import ant from ant-design-vue;import { ObjAscend, ObjDescend } from ./utils/utils;const app createApp(App);
//在这里挂载 这里挂载的是两个函数
app.provide(ObjAscend, ObjAscend);
app.provide(ObjDescend, ObjDescend);
//不推荐这种挂载方式了最新版本已经弃用了
app.config.globalProperties.window window;
app.use(router).use(store).use(ant).mount(#app);组件中
import { defineComponent, inject } from vue;let ObjAscend:(parm:string)any inject(ObjAscend)
let ObjDescend:any inject(ObjDescend)vue2全局挂载 main.ts中
import Vue from vue
import App from ./App
import wLoading from /component/w-loading.vue;
import store from ./store
import {showToastOrNavTo,scanCode
} from /utils/util
Vue.prototype.$store store;
Vue.prototype.showToastOrNavTo showToastOrNavTo;页面中 直接this就好了 mounted() {this.showToastOrNavTo()this.scanCode()}js点击按钮复制文本方法 //方法一clickCopy(text) {const save function (evn) {evn.clipboardData.setData(text/plain, text);evn.preventDefault(); // 阻止默认行为};document.addEventListener(copy, save); // 添加一个copy事件document.execCommand(copy); // 执行copy方法this.$message({ message: 复制成功, type: success });}//方法二clickCopy(code) {let oInput document.createElement(input);oInput.value code;document.body.appendChild(oInput);oInput.select(); // 选择对象;document.execCommand(Copy); // 执行浏览器复制命令this.$message({ message: 复制成功, type: success });oInput.remove()}
