js
不求甚解bc
这个作者很懒,什么都没留下…
展开
-
js防抖、节流、防重复
js防抖、节流、防重复点击原创 2024-06-04 18:14:33 · 387 阅读 · 0 评论 -
js数字、字母、符号等半角文本按0.5个字符计算长度
可以自定义一个指令(directive)来动态监控输入内容,并结合上面提供的。组件时,应用这个自定义指令,并设置期望的最大有效长度。封装 getEffectiveLength 方法。原创 2024-04-15 17:13:35 · 605 阅读 · 0 评论 -
浏览器唯一标识(浏览器指纹)fingerprintjs
很多项目会随机生成一个UUID,并持久化存储在localStorage,但是localStorage也有被清除的风险,就需要一个不会变也不会被清掉的值作为游客身份的唯一标识。通过浏览器canvas绘画出一张指定的图,将绘画出来的图片转为base64格式,然后再将base64内容通过指定编码方式转化为fingerprintID。因为不同浏览器,由于浏览器api、版本、系统等原因,绘画出来的图片会存在非常细微的差异,人眼很难辨别,所以转换出来的base64会不一样。原创 2024-02-01 15:57:34 · 1775 阅读 · 0 评论 -
Vue自定义指令校验按钮权限
在类似运营平台的项目中,经常会有一些操作按钮需要校验当前登录的用户是否有权限访问。然而在每一个按钮上都加 v-if 判断非常的繁琐和冗余,为此可以通过自定义指令的方式来处理按钮权限原创 2024-01-25 15:55:04 · 886 阅读 · 0 评论 -
解决js计算精度问题
由于浮点数存在计算精度问题,常用的办法是四舍五入保留2位小数来解决。但是在向上、向下保留小数的时候,比如:0.1+0.2=0.30000000000000004,向上保留2位小数就变成了0.31。原创 2024-01-18 13:44:17 · 905 阅读 · 0 评论 -
从0开始搭建react项目(函数组件)
从0开始搭建react函数组件项目原创 2023-06-13 11:06:25 · 1201 阅读 · 0 评论 -
vue路由中间件
在访问vue系统时,经常需要在进入路由前做一些全局处理或者登录状态校验,如果全部写在beforeEach函数中,内容会特别多,难以维护。需要将beforeEach中的内容拆分成多个中间件方法,按顺序执行。3、在路由配置文件router/index.ts添加中间件。注册需要的中间件文件,以修改页面标题和登录校验为例。原创 2023-06-02 16:34:56 · 1013 阅读 · 0 评论 -
vue-virtual-scroll-list虚拟列表
虚拟列表原创 2023-03-09 15:53:25 · 3147 阅读 · 0 评论 -
获取本地外网ip的api接口
开发时偶尔会需要前端传客户端的ip地址,以下方法可以获取客户端外网ip1、新增加载js方法export const loadScript = (src) => { return new Promise((resolve, reject) => { const script = document.createElement('script') const head = document.getElementsByTagName('head')[0]; scri原创 2022-04-10 10:56:04 · 5094 阅读 · 0 评论 -
js判断身份证是否合法
function isCardID (sId) { var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 5.原创 2021-07-28 13:58:16 · 1626 阅读 · 0 评论 -
修改浏览器url
手动修改浏览器urllet _url = window.location.protocol + '//' + window.location.host + '/index';window.history.pushState({},0, _url);原创 2021-07-28 13:42:05 · 1597 阅读 · 0 评论 -
H5点击复制到剪贴板
开发web端页面时,经常需要复制页面文本到剪贴板,比如页面展示订单号、物流单号等,我们使用js原生的document.execCommand实现复制功能1、在页面添加input框,给button绑定点击事件<input type="text" id="copy-input" value="hello world"><button @click="copy">复制</button>2、写copy方法const input = document.getE原创 2021-05-11 17:07:46 · 4315 阅读 · 0 评论 -
js禁止页面滚动
在web页面中,经常遇到一些弹窗内部有滚动条,可以滚动,弹窗后面的文档流也可以滚动,两个滚动区域会相互影响,用户体验不太好。1、弹出弹窗,禁止滚动const disableScroll = (domId) => { var scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop; // 禁止滑动 const selectdom = domId || 'app'; document原创 2021-03-03 17:19:42 · 9565 阅读 · 2 评论 -
less/scss主题切换
1、实现原理给内容最外层标签添加不同的主题class,用以区分不同的主题2、less写法.module-theme(@theme, @tag) { .m-title-box { background: @theme; } .m-head .m-info .m-name { color: @theme; } // 其他样式也如此}.theme...原创 2020-03-10 14:02:43 · 3694 阅读 · 2 评论 -
vue打包加版本号
vue打包会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号。vue-cli 2.0修改build/webpack.prod.conf.js,在HtmlWebpackPlugin插件配置项中添加hash: truenew HtmlWebpackPlugin({ filename: process.env.NODE_E...原创 2020-03-04 15:29:41 · 6958 阅读 · 0 评论 -
h5下载、导出文件
后台管理系统经常会需要导出Excel表格,h5导出、下载文件的常用方式有以下两种:1、a链接下载,该方法较为常见。特点:无法携带自定义请求头,接口验证用户信息不方便import qs from 'qs';export default function (url, data) { if (data) { url = url + '?' + qs.stringify(dat...原创 2020-03-03 15:12:28 · 4870 阅读 · 0 评论 -
H5移动端调试工具
H5在真机上看不到调试信息,可以用移动端调试工具查看console.log信息,报错信息以及请求信息。一、eruda<script src="https://cdn.bootcss.com/eruda/1.5.8/eruda.min.js"></script><script> eruda.init();</script>...原创 2020-01-08 13:46:55 · 5004 阅读 · 0 评论 -
js时间format
在数据库中,时间大多以时间戳格式存储,前端需要将之转换为对应的时间格式一、手动转换1、获取当前时间let nowTime = new Date();2、获取当前时间戳let nowTimeStamp = new Date().getTime();3、将时间戳转换为标准时间格式let time = new Date(timeStamp);//例如:let tim...原创 2018-08-17 09:13:22 · 7298 阅读 · 0 评论 -
js操作localstorage
localstorage是web前端常用的本地存储服务,它相对于cookie,有几个优势:①数据存储量大②不会携带给后台,避免传输没用的数据③操作简便1、首先,封装一个全局方法,以便各个地方调用export function handleLocalStorage(method, key, value) { switch (method) { case 'get' ...原创 2018-08-17 09:28:54 · 20841 阅读 · 0 评论 -
js获取url后的参数
前端页面传参主要是通过url实现:https://www.baidu.com?id=45&user=Jack该链接,传递了id和user两个参数,那么我们需要获取到这两个参数。1、封装一个全局方法export function getUrlParam(name) { let reg = new RegExp("(^|\\?|&)" + name + "=([^&a...原创 2018-08-17 09:41:17 · 5628 阅读 · 1 评论 -
Promise用法(以QQ授权为例)
Promise是ES6的一个新特性,能够很好的解决js异步处理的callback嵌套问题。在做三方授权登录时,总是要连续调第三方的多个接口,这里使用Promise方法再合适不过了。下面,我以node后台调取QQ用户信息为例,解释一下Promise的用法:1、我使用的是express框架,封装了QQ请求的方法const qs = require('querystring');co...原创 2018-09-13 12:54:44 · 4035 阅读 · 0 评论 -
js MD5加密
一、vue使用MD51、安装npm install --save js-md52、需要使用的页面引入import md5 from 'js-md5';3、使用md5('123456')二、html页面使用MD51、引入MD5插件<script src="static/MD5.js"></script>2、使用hex_md...原创 2018-10-10 16:21:11 · 10712 阅读 · 0 评论 -
contenteditable可编辑div插入图片
可编辑div也就是常说的富文本编辑器,自己手动做一个富文本编辑器。需要设置div的可编辑属性contenteditable="true"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>富文本上传图片原创 2018-11-14 09:42:40 · 11097 阅读 · 2 评论 -
js原生、ES6数组去重
方法一:给数组原型添加unique方法,那么数组就可以在任何地方像用push的方法一样,直接使用。// 绑定unique去重方法到Array原型上Array.prototype.unique = function(){ let temp = {}, newArr = []; for(let item of this){ if(!temp[item]){ ...原创 2018-11-15 12:15:06 · 4914 阅读 · 1 评论 -
js上传图片获取原始宽高
以vue上传图片为例:<template> <div> <input type="file" @change="uploadFile($event)" multiple="multiple" /> </div></template><script> e原创 2019-03-05 15:22:55 · 5518 阅读 · 0 评论 -
nginx解决跨域
1、web前端开发经常会遇到跨域访问,如果没有办法让后台开放访问域,调用接口就会被浏览器拦截。解决跨域问题的方案,可以搭建一个后台服务做中间转发,也可以用nginx转发。2、nginx部署配置,打开conf/nginx.conf文件server { listen 8080; server_name localhost; root html; ...原创 2019-07-11 11:42:39 · 32288 阅读 · 2 评论 -
判断浏览器类型,微信,QQ
在移动端网页开发中,我们经常需要判断浏览器类型,是在微信内置浏览器,还是QQ内置浏览器,或者是其他浏览器打开。function is_weixn_qq(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { re...原创 2018-08-15 12:17:52 · 4323 阅读 · 0 评论