![](https://img-blog.csdnimg.cn/20200507104815914.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
为不上班而上班
记录我的前端之路, 学习到的知识 , 工作遇到的难题和解决方案.
卷B只有挂在墙上才知道休息
你喜欢的样式我都有。
展开
-
HTML5调用系统摄像头结合canvas进行拍照以及文件上传,调用结束后关闭浏览器对摄像头的占用
【代码】HTML5调用系统摄像头结合canvas进行拍照以及文件上传,调用结束后关闭浏览器对摄像头的占用。原创 2024-06-22 15:47:20 · 233 阅读 · 0 评论 -
JS通用方法 : 根据文件类型进行下载, 文档/图片
根据文件类型进行下载, 文档/图片原创 2023-11-22 13:49:00 · 480 阅读 · 0 评论 -
JS方法,将数字转换为大写金额 大写 数字转汉字 , 金额
将数字转换为大写金额 大写 数字转汉字 , 金额原创 2023-09-28 10:13:03 · 214 阅读 · 0 评论 -
typescript方法:数字转化成带千分符的金额,并且保留四位小数
typescript方法:数字转化成带千分符的金额,并且保留四位小数原创 2023-07-27 10:45:46 · 313 阅读 · 0 评论 -
一个很好用的判断是否为空 / null /undefined 等的方法,判空
一个很好用的判断是否为空 / null /undefined 等的方法,如果是 空 / null /undefined 则返回true。原创 2022-12-30 11:30:25 · 762 阅读 · 0 评论 -
取消elementUI的数字输入框的箭头
111原创 2022-08-19 16:03:59 · 330 阅读 · 0 评论 -
echars词云 构建与配置
echars 词云 构建与配置原创 2022-06-27 17:35:52 · 516 阅读 · 2 评论 -
前端项目用hbuilder打包成APP后,调用api开启摄像头进行拍照, 5+app框架
前端项目用hbuilder打包成APP后,调用api开启摄像头进行拍照, 5+app框架原创 2022-06-21 15:18:54 · 2082 阅读 · 0 评论 -
JS实现数组均分, 将数组均等分成多个
数组均分原创 2022-06-10 18:02:24 · 4178 阅读 · 0 评论 -
vue异步请求, 等待处理的回调方法, 解决 拿不到请求rueturn出来的数据 问题
:有的时候我们需要在网络请求结束后,再进行后续动作,例如,在一段网络请求结束后执行跳转,如果不做处理,会有可能出现网络请求未完成的时候页面就已经跳转走不存在了,所以要在调用网络请求的方法中加入一个回调函数,函数里边写请求结束的代码,然后等待网络请求结束后,再去执行这个回调函数.........原创 2022-06-09 16:14:10 · 2700 阅读 · 0 评论 -
JS实现鼠标拖动 , 不会因为鼠标移动太快, 脱离范围导致停下来
调用该方法即可, 原理是将鼠标移动和松开左键(弹起) 从div转移到window上/** * 鼠标拖动 拖动 * @param id 这里是 querySelector获取 , 因此需要 '#dragBox' ,带选择器 * @returns {{}} */function Drag(id) { //获取元素。 let demo = document.querySelector(id) // '#dragBox' let canMove = false let x = 0,原创 2022-05-19 19:32:04 · 2314 阅读 · 0 评论 -
css实现气泡对话框
细节自己改一下css 很简单<div id="wrapper"></div>#wrapper { position: relative; width: 800px; height: 800px; border-radius: 12px; background: #ffffff; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3)); padding: 12px !important; ove原创 2022-04-15 14:15:51 · 501 阅读 · 0 评论 -
js 获取元素在页面上的绝对位置
getSet(el) { var Box = el.getBoundingClientRect(), doc = el.ownerDocument, body = doc.body, html = doc.documentElement, clientTop = html.clientTop || body.clientTop || 0, clientLeft = html.clientLeft ||原创 2022-01-17 16:30:36 · 1395 阅读 · 1 评论 -
css实现文字无缝横向滚动
<div style="height:20px;font-size:14px;" class="water_tips"> <span class="water_text">公告内容</span></div>.water_tips { width: 100%; line-height: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.7);原创 2022-01-17 15:32:05 · 2907 阅读 · 1 评论 -
使用JS获取N个月(前后都可)的日期
2022年1月7日 16:49:37 获取 6个月前 的 日期时间 ;如果传参 为 正数 则是获取 N个月前 的时间如果传参 为 负数 则是获取 N个月后 的时间function getDate(params) { var dt = new Date(); dt.setMonth(dt.getMonth() - Number(params)); return dt.toLocaleString().replace(/\//g, '-') //这里只是把 "/" 替换为 "-"原创 2022-01-07 16:51:58 · 1236 阅读 · 2 评论 -
js 列表自动上下滚动, 开始自顶向下,到底后向上滚动 ,周而复始;
js 实现列表自动上下滚动, 开始自顶向下,到底后向上滚动 ,周而复始;原创 2021-12-30 20:15:15 · 2188 阅读 · 1 评论 -
JS获取时间差,转化为 XX时间前
JS获取时间差,转化为 XX时间前原创 2021-12-30 19:15:14 · 446 阅读 · 0 评论 -
css实现div的四角边框效果
css实现div的四角边框效果原创 2021-12-30 14:15:33 · 2165 阅读 · 0 评论 -
js 实现浏览器全屏,直接调用本方法即可
JS实现浏览器全屏原创 2021-12-28 11:14:09 · 2911 阅读 · 0 评论 -
记录一下elementUI message组件的BUG: 刷新页面, 消息提示空内容
折腾我一早上 , 万万没想到BUG是存在于UI框架!!! 我把好多页面删了,再去看项目居然这个 空的消息提示一直都在, 气哭…Vue.use() 这种写法可能会页面刷新时自动弹出 message,可将下图红框里换成 Vue.component(Message)重点:红圈内两种应用组件的方式...原创 2021-12-06 11:26:52 · 342 阅读 · 0 评论 -
js快速获取 年月日时分秒 格式的时间
new Date( +new Date() + 8 * 3600 * 1000 ).toJSON().substr(0,19).replace("T"," ")原创 2021-10-25 15:09:49 · 463 阅读 · 0 评论 -
移动端h5页面监听用户手势滑动
直接整个代码复制丢进去运行;需要加入自己的操作可以在最底下 alert(‘XX’)的地方加 var h = document.documentElement.clientHeight, mybody = document.getElementsByTagName('body')[0]; mybody.style.height = h + 'px'; //返回角度 function GetSlideAngle(d原创 2021-10-11 15:56:37 · 3797 阅读 · 0 评论 -
vue:使用国际化
简单说,有2个地方:main.js里把new Vue包起来,如下window.vm = new Vue({ // 重点是window.vm = 先将vue挂在window上,在进行第二步 router, i18n, render: h => h(App),}).$mount('#app')需要使用国际化的js文件中,如下使用:window.vm.$t('authentication.failed.message')有用,点赞,嘿嘿嘿.........原创 2021-09-24 17:58:23 · 724 阅读 · 0 评论 -
JS让页面全屏显示
$('#btn').click(function(params) { requestFullScreen(document.documentElement);})function requestFullScreen(element) { var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome element.mozRequestFullScreen原创 2021-09-08 11:07:00 · 365 阅读 · 0 评论 -
纯CSS修改复选框checkbox
效果图:细节的话,自己改,有用点赞下面是css:input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-left: 5px; -webkit-appearance: none; background-color: transparent; border: 0;原创 2021-08-13 11:18:13 · 302 阅读 · 0 评论 -
vue2: data中的this指向问题
类似这样,此时this指向并不是我想要的,因为我没法this.XXX拿到对应的数据,使用在这个lazyLoad方法中。直接记录一下解决方法,很简单把lazyLoad方法改成箭头函数。this指向就对了。原创 2021-07-28 17:29:04 · 967 阅读 · 0 评论 -
web页面的回流,认识与避免
一、什么是回流?回流是会导致页面重新渲染的一些元素,从而影响性能。二、哪些因素会导致回流?1、调整窗口的大小;2、改变字体,如果用rem 设置了根目录的字体大小,这样就减少了回流的次数;3、增加或者移除样式表;4、内容的变化,用户在input中输入了文字(这是不可避免的);5、激活CSS的伪类;6、操作class属性;7、基本操作DOM(包括js中的domcument等);8、计算offsetWidth与offsetHeight 属性,获取元素在窗口中的位置;9、在html代码中直接原创 2021-07-15 17:01:00 · 523 阅读 · 0 评论 -
前端性能优化小结
前言移动互联网时代,用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏,其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。从用户的角度而言,当打开一个网页,往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间,这个时间越短,用户体验越好。所以作为网页的开发者,就从输入url到页面渲染呈现这个过程中去提升网页的性能。所以输入URL后发生了什么呢?在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。http缓存优化是转载 2021-07-15 16:54:37 · 852 阅读 · 0 评论 -
js 字符串中提取多个网址 并替换成 超链接a标签
直接将字符串当参数,调用该函数即可function getHref(content) { if (!content) { return ""; } let urlPattern = /(https?:\/\/|www\.)[a-zA-Z_0-9\-@]+(\.\w[a-zA-Z_0-9\-:]+)+(\/[\(\)~#&\-=?\+\%/\.\w]+)?/g; content = content.replace(urlPattern, function(match) {原创 2021-04-14 16:02:03 · 2371 阅读 · 3 评论 -
echars中国地图,省份名字居中
百度网盘,echars中国地图省份居中chain.js链接: https://pan.baidu.com/s/1zu0O1fMUYhZ9-YAtZN0q1w提取码: jjhxechars中国地图上的省份名字所在的位置,本质上是坐标,我要改成居中,也是修改这个坐标即可。这一份是已经改好了坐标的js,地图所需要的json就在js中定义了。直接替换这份js即可,或者替换地图中的json。...原创 2021-03-19 10:11:28 · 816 阅读 · 0 评论 -
移动端让页面 竖屏显示的 方法
将以下两个方法,放进你的methods里,在需要竖屏的地方调用 this.detectOrient() 即可。如果不是vue项目,可以把方法内容搬过去,也一样的,运行就完了。methods: { detectOrient() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document.getE原创 2021-02-23 17:17:04 · 573 阅读 · 0 评论 -
用width或者height缩小 多倍图,图片变模糊的解决办法
今天拿到一张 294*72 的3x图片,用width或者height缩小,但是发现略有模糊。加入下面的代码就解决拉.logo { width: 98px; height: 24px; /* 加入下面css */ image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edg原创 2021-01-27 17:47:20 · 1629 阅读 · 0 评论 -
layui 弹出层 [object Object] 的问题
解决方式如下: layer.open({ title: false, type:1, //重点在这里,设置type为1可以解决 [object Object] 的问题 closeBtn: 0, content: $('#id') });原创 2021-01-27 15:00:55 · 3490 阅读 · 1 评论 -
IE11下载文件报错400
一直使用的window.location.href做文件下载,今日收到反馈说在IE11下面会出现http400的错误,其它浏览器均正常。处理办法:比如下载路径中有参数name=石家庄 用方法encodeURI()处理下再传就不会出问题了,encodeURI() 函数可把字符串作为 URI 进行编码。例:window.location.href= "index?&name="+encodeURI(name)......原创 2020-10-29 09:14:32 · 1321 阅读 · 0 评论 -
JS 用 正则 去替换 指定变量字符串
let XXX = ‘变量’; //要被替换的字符串是个变量string.replace(new RegExp(XXX,'g'),"替换后的值");原创 2020-09-30 14:09:29 · 909 阅读 · 0 评论 -
js获取随机色,也可以 指定获取 深色 or 浅色。
有帮到你的话,请顺手点个赞或者关注吧! function randomColor(num) { // 1 代表获取 浅色的随机色 2代表获取深色的随机色 不传参数num代表获取随机色 if(!num){ var color = ""; for (var i = 0; i < 6; i++) { color += (Math.random() * 16 | 0).toString(16); } return "#" + color; } if原创 2020-09-09 18:01:24 · 1920 阅读 · 0 评论 -
css强制换行、强制不换行,溢出隐藏
css实现强制不换行/自动换行/强制换行在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求。虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧。今天我们来学习一下如何熟练的掌握用css实现文字的强制不换行/自动换行/强制换行的方法。需要的伙伴们可以来一起学习哦!一. 强制不换行div{ white-space:nowrap;}二. 自动换行div{ word-wrap: break-word; word-break: normal;}原创 2020-09-03 19:16:40 · 19074 阅读 · 2 评论 -
30 道 高 频 率 Vue 面试题,内含详细讲解
1、说说你对 SPA 单页面的理解,它的优缺点分别是什么?SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。优点:用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;基于上面一点,SPA 相对对服务器压力小;前后端职责原创 2020-08-27 09:21:55 · 866 阅读 · 0 评论 -
js 取消浏览器默认的 离开未保存提醒 事件
window.onbeforeunload=function(e){ return true}原创 2020-08-13 15:43:50 · 702 阅读 · 0 评论 -
小图标换色,不需找UI啦
今日想找UI更新一下小图标的颜色,使得页面对比度更高,但是UI很忙,想老夫自称CSS大魔法师,就打算利用CSS解决这个问题。这不是字体图标(字体图标直接设置color就完了),这是图片(PNG)。利用css3 filter 滤镜属性原理:使用了CSS3滤镜filter中的drop-shadow,drop-shadow滤镜可以给元素或图片非透明区域添加投影。对于背景透明的png小图标而言,如果我们施加一个不带模糊的投影,不就等同于生成了另外一个颜色的小图标了吗?然后,我们把原始图标隐藏在容器外面,原创 2020-08-04 17:42:17 · 279 阅读 · 0 评论