自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(25)
  • 问答 (1)
  • 收藏
  • 关注

原创 前端加密与后端解密,前端放在请求头,后端解密

前端加密与后端解密,前端放在请求头,后端解密

2024-01-26 15:07:22 162

原创 树结构的数据整理

树结构数据整理

2024-01-26 14:58:55 128

原创 前端实现TOTP加密

前端实现时间戳和密钥生成6位TOTP密码,30s失效

2024-01-26 14:51:53 205

原创 前端常用的公用函数封装

前端常用的公用函数封装

2022-01-24 14:42:41 608

原创 js 监听当前页面是否正在被用户浏览

需求:当用户浏览当前网页的时候,每隔3s或者5s调取一次数据接口,进行页面数据的刷新。方案1:监听用户在当前页面上鼠标是否有移动,如果有移动则执行函数刷新页面数据 //做判断 当dom上有操作的时候 开始执行接口 每5s刷新一次数据 // 为window添加mousemove,移动时设置变量为true,静止后为false; (function () { let isMove = false, timer = null; window.onmousemove = function

2021-10-26 16:31:25 1412

原创 jquery点击事件失效原因和解决办法

使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候例如:给demo里添加li元素给li绑定点击事件$("#demo").append('<li>点我</li>'); 给li元素绑定点击事件// 示范一$("#demo li").click(function(){ alert($(this).html());});// 示范二$("#demo li").on('click',function(){ alert

2021-10-26 15:43:58 1175

原创 当dom上有操作的时候 开始执行接口 每5s刷新一次数据

//做判断 当dom上有操作的时候 开始执行接口 每5s刷新一次数据//为window添加mousemove,移动时设置变量为true,静止后为false; (function () { let isMove = false, timer = null; window.onmousemove = function () { isMove = true; clearTimeout(timer); console.log('移动时',isMove); /

2021-10-25 10:07:34 170

原创 js中的鼠标右键点击事件

window.onload = function(){ //去掉默认的contextmenu事件,否则会和右键事件同时出现。 document.oncontextmenu = function(e){ e.preventDefault(); }; document.getElementById("test").onmousedown = function(e){

2021-10-25 09:00:57 5923

原创 设置当前选中的一直在浏览器的可视区域中

设置当前选中的一直在浏览器的可视区域中当前的选中项是在上一个视频页面选择的,选择的是最后一个视频,在如上的新窗口打开的时候,需要让选中的那一项在浏览器的可视区域中。刚开始的做法是获取选中的那条视频列表(li 类名为selected)距离顶部的距离,在设置动画,使选中的那条视频列表li出现在可视区域内var top = $(".selected").offset().top$(".selected").offset().top)$('html,document').animate({ scro

2021-10-22 15:00:27 304

原创 js获取文件后缀名

js获取文件后缀名//文件路径var filePath = "file:///storage/emulated/0/opmark/User/Pic/hangge.png";//获取最后一个.的位置var index= filePath.lastIndexOf(".");//获取后缀var ext = filePath.substr(index+1);//输出结果console.log(ext);封装成函数的话:function getFileType(filePath){ var s

2021-10-22 13:37:06 425

原创 npm ERR! { Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs\node_cache\_locks‘

新换电脑,重新安装开发环境,win10下安装node之后,node -v,npm -v都正常,node安装成功,但是运行npm i或者全局安装某插件时,报错:’npm ERR! { Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache\_locks原因是node目录权限不够win + x(治标不治本)选择管理员身份运行命令行找到node安装目录,右键属性,点击安全,设置users用户完全控

2021-10-19 15:11:09 993 1

原创 前端做数据处理,将带有相同属性的对象合并成一个对象数组并依据数据插入到dom中

数据处理假设下面是后端返回的数据: [ { "app": "Ticket", "createtime": "2021-10-18 22:03:28", "enable": 1, "client": "WebPc", "online": 1, "id": 39, "version": "1.1.4",

2021-10-19 10:57:01 710

原创 Vue项目,菜单栏动态渲染

前两天做了vue项目的菜单栏的动态渲染,其实很简单,就是后端会传递给我菜单的图标,名称,跳转的路径以及路由跳转时做需要携带的参数。但是后端传递给前端的数据中,前端在页面中做跳转的时候,他的携带的参数有问题,因为后端给的需要携带参数的数据是一个json对象,前端在做跳转的时候,直接将json中的数据携带到了地址栏,而前端需要用的参数其实是一个对象的某一个属性。这时就需要做一转换的处理:下面是后端传递过来的动态菜单的数据(一个为例):{ parent:null, code: null, creat

2021-10-19 10:30:18 1982

原创 数据按照时间的先后排序

数据按照时间的先后排序 时间格式为2021-10-18 09:02:28运用了sort()方法进行排序若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。若 a 等于 b,则返回 0。若 a 大于 b,则返回一个大于 0 的值。 data.sort(function(a,b){ return a.time < b.time ? 1 : -1 })本地的案例代码 me.firstdata_list = me.firstdata

2021-10-19 10:07:39 598

原创 数据格式的转换(改为联动的数据格式)

后端返回的数据格式如下: let data = [{ "c3": "", "createtime": "2021-09-14 14:19:27", "enable": 1, "id": 1, "c1": "基础环境", "c2": "工厂相关业务" }, { "c3": "", "createtime

2021-10-13 13:08:35 96

原创 数组对象转为二维数组

数组对象转为二维数组(1)今天脑子好像瓦特了,一直想问题复杂化,最后越寻思越懵。需求是将一个数组对象改为维数组,例如:let arr = [ {name:'zs',age:18}, {name:'ks',age:20}, {name:'wy',age:18},]改为这样的格式 [ [{name:'zs',age:18}], [{name:'ks',age:20}], [{name:'wy',age:18}],]我看到这

2021-10-13 12:55:05 936

原创 从字符串中提取汉字的方法

提取汉字//提取汉字function GetChinese(strValue) { if (strValue !== null && strValue !== '') { const reg = /[\u4e00-\u9fa5]/g; return strValue.match(reg).join(''); } return '';}

2021-10-09 13:13:28 1486

原创 Vue中$refs取值是undefined

$refs取值是undefinedref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,如果用在子组件上,引用就指向组件实例。如果使用 v-if dom 就不会被渲染 ref 会一直获取的是undifined,这时可以利用下面方式获取数据 <div :class="currentStep==0?'el-form-item-show':'el-form-item-hidden'">.

2021-10-08 15:58:45 3035

原创 判断当前设备为移动端

判断当前设备为移动端 /** * @description: 判断当前设备为移动端 * @param {*} * @return {*} */ isMobile () { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrows

2021-10-08 14:12:03 81

原创 不刷新页面修改url地址方法

不刷新页面修改url地址方法利用HTML5的history.replacestate() 修改当前页面的URL但是修改的url不能跨域(用于替换掉的URL必须是同域的)history.pushState(state, title, url);state:状态对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时,都会触发popstate事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。title:当前大多数浏览器都忽略此参

2021-10-08 14:05:06 1927

原创 获取路由参数值

Vue3.0中获取路由参数值/** * @description: 获取路由参数值 * @param {*} * @return {*} */ const getQueryString = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg);

2021-10-08 13:28:06 182

原创 后端返回的数据中含有\n,前端做换行的格式转换

后端返回的数据中含有\n,前端做换行<>的格式转换changeLine(str){ // console.log('str',str) if(str !=null){ return str.replace(/\\n/gmi, '<br>') } },

2021-10-08 13:23:24 2149

原创 vue $ref和$ el的使用

$ refref 被用来给元素或子组件注册引用信息ref 有三种用法:  1、ref 加在普通的元素上,用this.refs.(ref值)获取到的是dom元素  2、ref加在子组件上,用this.refs.(ref值) 获取到的是dom元素  2、ref 加在子组件上,用this.refs.(ref值)获取到的是dom元素  2、ref加在子组件上,用this.refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值).方法()就可以使

2020-05-25 10:43:39 1506

原创 vue @click.native

vue @click.native 原生点击事件:1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)@click.native 是给组件绑定原生事件,只能用在组件上,不可以用在原生元素上。异常信息:[Vue warn]: The .native modifier for v-on is only valid on components but it was used on .2,等同于在自组件中:子组件内部处理click事件然后

2020-05-25 10:30:01 654

原创 2020-05-10

js中的getBoundingClientRect方法getBoundClientRect()获取元素位置,这个方法是没有参数的。用于获取页面中某个元素的左,上,右,下 分别相对浏览器窗口的位置(不包含卷上去的部分)。这个方法返回一个对象,这个对象有6个属性:top,left,right,bottom,width,height。top:元素上边到视窗上边的距离;right:元素右边到视窗左边的距离;bottom:元素下边到视窗上边的距离;left:元素左边到视窗左边的距离;width:元素

2020-05-10 11:33:35 101

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除