oopsWeb!-CSDN博客

js实现复制粘贴板功能原理：利用input中框选，以及利用document.excCommand实现复制。const copyIpt = document.createElement('input'); // 创建dom用于存储需要复制的值document.body.appendChild(copyIpt); // 插入在页面中copyIpt.setAttribute('value', data); // 为生成的dom添加value，以便框选copyIpt.select(); // 选中i

2022-04-15 14:40:21 731

原创本地nginx代理配置跨域请求

本地nginx下载地址一、下载本地nginx后解压并修改核心文件cong/nginx.conf cong/nginx.conf server { listen 8099; // 本地设置访问端口号,可自行配置，以免出现端口占用的情况 root E:\\MFA\\selfhelp-login\\login; // 需要配置代理的项目根路径 index login.html; // 根文件，一般为index

2022-03-28 11:17:30 1523

原创 React配置@src根路径

我们通过create-react-app脚手架搭建的项目其中的webpack配置文件都是被封装起来的，项目中我们需要使用@src配置根路径，从而方便使用绝对路径的话，就需要去把webpack抽离出来进行修改。执行 npm run eject （此操作是不可逆的！）执行完成后，项目目录中会多出两个文件夹config和scripts在config中找到webpack.config.js文件在alias中添加'@src': path.resolve('src')alias: { /

2022-01-26 15:32:48 2687

原创 css多行文本溢出隐藏 (解决溢出隐藏中文在一行显示，无法换行问题)

.txt { width: 100%; height: 50px; display: -webkit-box; /* 弹性盒模型*/ -webkit-line-clamp: 2; /*设置在第几行显示省略号...*/ -webkit-box-orient: vertical; /*子元素排列方式纵向*/ overflow: hidden; /* 溢出隐藏*/ word-break: break-all; /* 允许在单词内换行解决只有英文才能换行，中文无法换行问题，*

2021-12-13 11:27:11 481

原创 js随机字符a-zA-Z0-9

随机（a-z，0-9）Array(length) 创建length长度的空数组，用作循环指定个数的随机数Math.random() 返回0-1之间的浮点数 // 0.8055606175539534Number.toString(radix)radix为进制数，默认是10进制，支持[2,36]之间的整数，2代表二进制，8则为八进制，16位十六进制，按照进制数算，radix为16的话则会使用a-f来代表10-15之间的数，相同，36则会返回0-9a-z之间的数const

2021-12-11 09:45:14 1828

原创 git 版本回退基本使用方法

git版本回退分为两种方式，一种是回退commit记录，一种是commit加内容都回退git rever

2021-10-27 20:18:21 1449

原创 js封装监听滚动条触底加载事件

js在vue中封装监听滚动条触底加载事件此方法在原生JS以及React中同理使用，如果不用ref也可修改方法中的获取事件对象的方式即可在监听滚动条触底事件时会有一个问题：滚动条一触底，事件不只触发一次，而是多次，这样会一下发多次请求，导致达不到预期效果还影响性能，所以此处我做了一个简易的节流来解决此问题。最后通过scrollFoot(event)调用，ref的事件对象为实参传入当已滚动的距离加上dom元素可视区的距离等于滚动条总高度时代表触底了 // 滚动条触底事件 data(

2021-10-20 09:10:03 1710

原创 git工作中基本使用命令

如果你已经在 .gitignore 文件中添加了 /operatorApi/.env，但是 .env 文件仍然没有被忽略，可能是因为 .env 文件已经被 Git 跟踪过了，通过以下命令将已经跟踪的 .env 文件从 Git 中删除。这种报错问题一般是远程仓库中有的文件而本地仓库却没有，所以我们需要先将远程仓库拉取下来，再进行push操作，不过执行前，先把你本地项目文件拷贝一份以防丢失！Git 仓库中的提交记录保存的是你的目录下所有文件的快照，就像是把整个目录复制，然后再粘贴一样，但比复制粘贴优雅许多！

2021-10-12 21:56:54 1376 1

原创 rem配合vw适配计算

vw是一种css单位。1vw相当于视窗宽度的1%,100vw相当于100%.iphone6适配100 / 375 * 100 = 26.666667vwhtml{font-size:26.666667vw }iphone5100 / 375 * 100 = 31.27vw

2021-10-12 13:28:04 177

原创只遍历一次求第二大的值

不使用sort，只遍历一次怎么拿到第二大值？可以通过遍历数组，初始拿到前两个的值，每遍历一个元素就判断大小交换变量，保证每次遍历，a始终比b大，b也始终比后面遍历的值要大，如果不是则交换 let arr = [4, 5, 6, 2, 10] let a = arr[0] let b = arr[1]// 之所以加1 就是为了让它多循环一次，不然最后一个为最大值的话，那么b将会是最大值，所以我要让它多判断一次 a 是否大于 b for (let i = 2; i < arr.lengt

2021-10-05 17:34:34 757

原创 js中抛出异常中断forEach

怎么中断forEach？forEach一旦执行，只用过return的话，它是只会跳过本次遍历，还是会走完全部，所以想要中断forEach的话，可以通过在其中手动抛出异常的方法去中断forEach let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] try { arr.forEach(item => { if (item > 4) { throw 'error' } console.log(1);

2021-10-05 17:24:41 1152

原创 js实现图片上传预览功能

js实现图片上传预览功能很多业务场景下，我们需要在用户上传图片前，先预览待上传的图片<body> <input type="file"> <img src="" alt=""></body></html><script> const ipt = document.querySelector('input') const img = document.querySelector('img') ipt.ad

2021-09-17 16:04:57 496

原创 axios基本封装、请求拦截和响应拦截配置

我们可以在此配置请求拦截，响应拦截等大部分请求都需要携带token，我们可以在请求拦截中进行配置，让页面每次发起请求时都被拦截下来加上token再通过。import axios from 'axios'// 在此可判断当前是什么环境开发环境、生产环境const isDev = process.env.NODE_ENV;// 基础配置const ins = axios.create({ // 根路径根据上方判断的环境切换不能请求根地址 baseURL: isDev ? 'http://

2021-09-16 10:09:59 689

原创过滤存在嵌套的数组，并将符合的返回，原格式不变

根据搜索过滤出存在嵌套的数组，并将符合的返回，格式不变利用JSON将原数组拷贝一份，这样可以避免原数组被改变，再每个元素中遍历元素中嵌套的数组，将符合条件的返回给当前的数组，这样可以保证数据格式不变，遍历完嵌套数组后判断data中是否有数据，有则返回，防止出现返回一个空数组的情况newList = JSON.parse(JSON.stringify(List)).filter(item => { item.data = item.data.filter(ite

2021-08-20 19:42:45 518

原创根据数组中嵌套的对象属性进行去重

根据数组中对象属性进行去重先遍历循环原数组，声明一个计数器，用于记录新数组的遍历次数，在新数组的循环遍历中判断，新数组中每个对象的name属性是否等于原数组对象中的name属性,新数组每循环一次就判断新数组中对象属性是否都不存在都不存在则num会和新数组长度相等，有一次属性存在，num就会少加1，当前对象就不会被push到新数组中list.forEach((item) => { let num = 0; this.newList.forEach((items) =>

2021-08-20 19:25:03 372

原创 Vue中监听地址栏路由改变

Vue中监听地址栏（路由）改变有时在遇到需要跳转子路由时让当前父路由隐藏，子路由显示可使用 watch: { // 监听地址栏改变 // to 可获取到哪去的地址 // from 可获取到从哪来的地址 $route(to, from) { if (to.fullPath.includes("search")) { this.flag = true; } else { this.flag = fal

2021-08-14 11:07:20 621

原创 jQuery使用总结

入口函数$(document).ready(function(){ });语法糖可简化为$(function () { })$的另一种别名jQuery，也可以自定义别名const $j = jQuery.noConflict() DOMjQuery核心功能用来快速查找节点 - queryjq中的节点查询仿照了css选择器的规则，因此我们把jq的dom称为选择器元素选择$("#box"); //ID选择$(".box"); //类选择$("div"); //标签选择$(

2021-07-31 09:40:17 337

原创 javascript常用字符串方法

字符串常用方法str.charAt(idx); 查找idx索引的字符，返回布尔值str.indexOf(val); 返回val在字符串中第一次出现的位置，返回索引str.lastIndexOf(val); val在字符串中最后出现的位置，返回索引str.search(exp); 和indexOf一样，但该方法可支持正则查找str.substr(start,length); 从start截取length个字符str.substring(start,end); 从start截取到end

2021-07-17 17:33:21 141

原创 javascript常用数组方法

数组方法查询索引arr.indexOf('b'); // 找到返回元素索引位置，找不到返回-1查询索引arr.lastindexOf('b'); // 查找在数组中最后出现的位置，返回索引检测元素arr.includes('b'); // 检测数组中是否存在该元素，返回布尔值截取数组元素arr.slice(1,3); // 截取从索引1开始到索引3之前的元素，返回截取的新数组删除数组元素arr.splice(1,3); // 从索引1开始，删除3个，返回被删除的元

2021-07-17 16:59:13 172

原创 javascript高阶函数

高阶函数 forEachforEach用于遍历数组中所有元素，用法非常广泛，例如用在循环绑定事件arr.forEach(function(item,index){ //item为当前循环的元素，index为当前元素的索引}) map用于遍历数组，和forEach使用基本一致，只不过map有返回值,会返回一个新数组，原数组不变。// 形参中item表示遍历的当前元素，index表示当前元素索引，arr表示原数组;const newArr = arr.map(func

2021-07-17 16:32:20 124

原创 AJAX笔记

Ajax全称Async Javascript And XMLasync：指Ajax能够创建异步的HTTP线程请求到服务器，Ajax的核心价值。javascript：Ajax技术实现的载体平台，js内置对象XMLHttpRequest操作Ajax。xml：一种数据格式，用来客户端和服务器交互数据，现在更多的使用json。客户端创建Ajax并发送HTTP请求//创建一个请求对象实例，使用ajax发送请求到服务器，执行验证并获取返回的结果const xhr = new XMLHtt

2021-07-15 19:08:29 84

原创 javascript笔记总结

JavaScript基础JS是支持面向对象编程的跨平台脚本弱类型的语言面向对象是一种思想跨平台：ios、Android、windows、Linux脚本：依赖其他才能解析弱类型：变量在声明后还可以改变js组成DOM：文档对象BOM：浏览器对象ECMAScript：规范js的变量是用来储存数据的容器js的输出方式alert（） /浏览器弹窗、用户提示document.write（） //可在浏览器的显示区域显示文本console.log（） /控制台日志confir

2021-06-25 21:39:12 5400

原创培养编程逻辑思维，javascript经典算法

1、输入一个三位数，判断是否为水仙花数。所谓水仙花数是值，每一位数的立方之和等于这位数本身例如153 = 1 ^ 3 + 5 ^ 3 + 3 ^3var num = parseInt(prompt('请输入三位数'))var a = parseInt(num / 100) //提取第一位数var b = parseInt(num / 10) % 10 //提取第二位数var c = num % 10 //提取第三位数if(num == a*a*a + b*b*b + c*c*c) { con

2021-06-19 21:29:35 615

原创 css简易手风琴效果

用css完成简易手风琴效果，可以利用锚点链接来切换显示的色块。a标签为按钮，用来控制哪个盒子拉出要想用transition增加动画效果需要给盒子初始高度为0，就会有缓慢下拉动画效果。<style> .box { margin: 50px auto; width: 500px; height: 600px; border: 1px solid #000; } #box1, #box2, #box3 {

2021-05-25 13:31:13 308

原创 css双飞翼布局方式

css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小这里有四种方式可以实现一、利用浏览器加载顺序将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;

2021-05-21 20:29:51 327

原创 css两栏布局，一个固定一个自适应

两栏布局是一种比较常见于后台管理的布局方式，通常是左边固定宽度，右边随着屏幕宽度自适应宽利用BFC，左侧盒子设置浮动后，右侧的盒子就会上去，出现在左侧盒子底部，给右侧的盒子变成BFC区域就可以解决被左侧盖住的问题代码展示 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;

2021-05-21 20:08:42 288

原创 css高度自适应出现盒子高度塌陷问题

在网页布局中经常会遇到想给盒子设置高度自适应但出现高度塌陷问题，造成这个问题的原因就在于父盒子没有设置高度，子盒子有浮动这里有四种解决高度塌陷的方法一、给父盒子添加高度，这个可以从根本上解决问题，但无法做到高度自适应。二、给父级添加overflow：hidden属性,原理是我们给父盒子添加文本溢出隐藏属性后，会触发BFC（块级格式化上下文），这时浮动的盒子也会参与高度计算。这样就可以解决高度自适应问题缺点是当有子级元素需要超出父盒子时元素会被隐藏 div { width:

2021-05-20 20:53:58 605

原创 css禁止页面鼠标框选，选中

有些需求是禁止用户框选的，使得一些文本无法被复制 body { -moz-user-select : none; -khtml-user-select: none; user-select : none; } ```

2021-05-20 15:32:19 849

原创 flex布局下无法靠右对齐，实现靠右对齐方法

在flex布局的时候有时候我们在设置justify-content: end;属性的时候因为被其他盒子影响而无法靠右对齐这时因为浮动在flex布局下也不能使用的时候我们可以用到这个方法轻松解决div { margin-left:auto;}这个属性可在不适用浮动的情况下让盒子靠右对齐...

2021-05-20 13:31:29 3297

原创利用css实现盒子在浏览器居中显示

html+css实现在浏览器居中显示下面有两种方法，个人更推荐第一种利用transform方法实现居中一、利用固定定位属性让盒子相对浏览器上左移动各50%，再上左移动自身50% <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background: pink; position: fixed;

2021-05-20 11:51:05 2694

原创利用css完成轮播图效果

利用css完成轮播图效果方法很简单，下面先看代码 <style> * { margin: 0; padding: 0; } div { margin: 200px auto; width: 520px; height: 280px; border: 1px solid #000; position: relative; } ul { display: fl

2021-05-19 20:59:07 808

原创 img图片实现垂直居中

当我们插入的图片小于父盒子的时候，图片就会默认在左上角显示。一、先给父盒子添加 text-aling:centor; 使图片在水平居中显示。二、在img标签后添加一个行内块标签（如果不是可转换为行内块）。三、设置span标签样式（span宽度可以为0，高度100%自适应）span { display: inline-block; width: 0; height: 100%; background: red; vertical-align: middle;}

2021-05-18 20:13:40 2776 1

空空如也

空空如也