![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
郑板桥30
Viva la vida
展开
-
js实现一行半文本的截取
js实现1行半文本截取原创 2023-09-03 16:44:47 · 867 阅读 · 0 评论 -
swiper滚动块宽度踩坑记录
swiper滚动块宽度踩坑记录原创 2023-07-14 15:17:07 · 698 阅读 · 0 评论 -
js中this的指向问题
js面试题原创 2023-06-12 11:26:16 · 505 阅读 · 0 评论 -
详解arr.reduce()方法
js面试题原创 2023-06-08 16:19:10 · 1743 阅读 · 0 评论 -
moment 时间戳转为固定格式时间错误
有个需求是后端返回的时间格式是一个时间戳,例如:我们在页面上展示之前需要把这个时间戳转换为标准格式的时间。如果在页面上看到转换的时间有问题,请务必留意下转换格式有无问题。在转换时要注意格式,如果格式错误那么转换到的时间也会有问题。首先我们需要引入moment这个库。原创 2023-03-08 10:23:00 · 618 阅读 · 0 评论 -
react&antd(7)data is read-only 的只读问题解决
经过排查后发现是一个很低级的错误,因为const定义的是常量,无法对data再进行操作了,这里只需把const换为let就可以了。在日常工作中我们经常会遇到有一些字段不是必传到后端那边的,而是根据用户是否对该字段来进行操作再决定是否传给后端。思路:判断state的该字段的值是否为默认值,如果不是的话就通过解构来把该字段加进去。但是这样写会报错提示 data is read-only。原创 2022-09-25 11:50:53 · 2215 阅读 · 0 评论 -
react&antd(6)js原生input文件上传框样式美化
思路:input框可以先把之前的按钮透明度opacity设置为0,然后外层用div包裹。通过冒号对齐antd提供了相应方法,可以去antd搜索form表单。在上个需求中虽然功能完成了,但是原生input框的样式太简陋了,不符合页面的整体风格,而且上面三个输入框也没有对齐,所以需要美化样式。原创 2022-09-23 21:20:48 · 1178 阅读 · 0 评论 -
react&antd问题(5)js原生input实现用户上传txt文件并解析
在工作中遇到一个需求是希望前端解析用户上传的txt文件后封装成一个数组通过json格式发给后端,在这里我并没有用antd的组件,而是用了js原生的input来做。思路:通过js的fileReader对象来读取用户上传的txt文件,然后通过\n切割成一个数组再通过post请求发给后端。用户可以通过粘贴订单到订单列表来发送订单,也可以通过上传txt文件来发送订单,也可以同时粘贴订单和上传文件。如果用户在订单列表粘贴了订单也上传了文件,那我们可以在发请求的时候解构订单数组把用户粘贴的订单加进去。原创 2022-09-23 21:01:21 · 990 阅读 · 0 评论 -
react&antd问题(4)
思路:点击批量查询后弹出一个模态框,然后通过换行输入多个id,点击查询后把订单数组通过post请求发给后端。在工作中遇到一个需求是批量输入订单id,然后把这个订单id的数组传过去给后端。原创 2022-09-18 14:00:26 · 251 阅读 · 0 评论 -
react&antd问题(3)
在工作中遇到一个需求是对后端接口返回的关键词在文本中检索并且进行标红,如果文本过长就只显示标红字符串的前后10个字符。原创 2022-09-11 16:15:28 · 200 阅读 · 0 评论 -
react&antd问题(2)
思路:在模态框里面套一个form表单就可以了,这个在antd有现成的可以直接拿来用。在工作中遇到一个需求是页面新增一个领取功能,点击提交后会把数据提交到后端处理。原创 2022-09-11 15:59:29 · 85 阅读 · 0 评论 -
react学习
1.state的使用2.通过setState来修改状态3.this的指向问题a.用箭头函数绑定thisb.用bind方法绑定thisc.用class方法来绑定4.受控组件5.多表单元素优化 6.组件的props7.props的特点 8.组件传递的三种方式a.父组件传递数据给子组件 b.子组件传递数据给父组件 c.兄弟组件...原创 2022-07-13 00:58:58 · 122 阅读 · 0 评论 -
小泼猴案例页面的动态渲染
1.首先我们自己准备一个假的后端数据接口用来模拟,通过在在线平台fast mock上我们可以完成。2.在动态渲染之前我们先写好静态的HTML页面和css样式,在写完后开始准备写js3.在js中我们需要引入axios来对接口进行ajax调用(method是进行调用的方法,url是上面写的模拟接口,有了这个后我们就可以用then来接收数据)4.接收到数据后先用foreach对得到的数据进行遍历,这里的item指的是正在遍历的数组成员,index指的是该数组成员的下标。遍历后我们就可以进行字符串的拼接了。拼接完后原创 2022-07-10 22:19:42 · 579 阅读 · 0 评论 -
form表单
1.form标签的属性1.1 action属性 1.2 target属性1.3 method属性 1.4 enctype属性2.如何快速获取form表单的数据(通过serialize函数可以快速获取)原创 2022-07-06 22:20:49 · 80 阅读 · 0 评论 -
三大系列总结
三大系列总结原创 2022-07-05 14:10:41 · 70 阅读 · 0 评论 -
BOM学习
1.js同步和异步 2.js的执行机制 3.什么是url4.location对象的属性 5.location对象的方法 6.offset系列7.offset和style的区别原创 2022-07-05 01:36:41 · 58 阅读 · 0 评论 -
DOM和BOM学习
1.利用DOM创建元素2.利用DOM增加元素3.利用DOM删除元素a.removeChild4.利用DOM更改元素属性5.利用DOM获取元素. 6.利用DOM增加自定义属性7.利用DOM给获取到的元素注册对象原创 2022-07-02 23:21:48 · 134 阅读 · 0 评论 -
使用axios函数发ajax请求
我们首先要引入axios函数1.GET请求2.POST请求(post请求会遇到跨域的问题,但是浏览器已经帮我们解决了) 3.PUT请求原创 2022-06-29 23:57:40 · 146 阅读 · 0 评论 -
ajax请求和http请求的区别
1.ajax请求是一种特别的http请求2.在服务器端来说没有任何区别,区别在于浏览器端3.浏览器端的区别:浏览器端发送请求:只有xhr或者fetch发出的才是ajax请求,其他所有的都是非ajax请求。浏览器接收响应:(a)在一般请求中,浏览器一般会直接响应体数据,就是我们常说的刷新页面或者跳转页面。(b)在ajax请求中,浏览器不会对页面进行更新操作,只是调用监视的回调函数并传入响应的相关数据。...原创 2022-06-29 21:38:19 · 1157 阅读 · 0 评论 -
Ajax学习
1.jQuery中发起ajax请求最常用的三种方法:a.$.get()语法:$.get(url,[data],[callback])(1)使用get发起不带参数的请求(2)使用get发起带参数的请求 b.$.post()语法:$.post(url,[data],[callback]) 发送post请求c.$.ajax()语法:(1)使用$ajax发起get请求 (2)使用$ajax发起post请求 2.接口的概念使用aiax请求数据时,被请求的url地址,就叫做数据接口(简称接口)。注:每个接口都必须要有原创 2022-06-22 23:32:59 · 47 阅读 · 0 评论 -
dom学习
1.dom如何获取页面元素a.根据id获取使用document.getElementByld()的方法可以获取带有id的元素对象b.根据标签名获取使用document.getElementsByTagName()的方法可以返回带有指定标签名的对象的集合还可以通过document.element.getElementsByTagName('标签名')来获取某个父元素内部所有指定标签名的子元素,此时父元素一定得是一个指明的对象。c.根据class类名获取(h5新增)使用document.getElementsB原创 2022-06-20 21:24:51 · 298 阅读 · 0 评论 -
小泼猴案例操作问题以及解决方法2
运用onclick事件来触发音乐播放暂停功能原理:在div盒子里面放一个audio标签存放我们想要播放的音乐,然后通过js来控制音乐的播放,然后再用一个button标签来输入onclick="play()",接着在js定义play,第一个版本只能播放音乐,但是之后无论再点击多少次也不能暂停播放音乐,这里运用简单的if语句设置一个计数器来控制音乐的播放,当计数器是奇数音乐播放,计数器是偶数音乐暂停。而在小泼猴案例中,我们是通过点击图片来播放音乐的,因此我们还得给button用css添加这张图片。...原创 2022-06-19 00:47:55 · 78 阅读 · 0 评论 -
小泼猴案例操作问题以及解决方法1
问题1:网页和浏览器顶部多出来一个8px的边距解决方法:html的body会自带一个8px的外边距,设计一个css来解决即可问题2:div中放一张图片,往往div的下边缘会多出来几px的边距解决方法:1.给div设置一个和图片一样高的高度即可2.给图片设置一个display:block,让图片变成块标签也可以解决问题问题3.flex布局一行排不下了解决方法:设置一个flow-wrap属性,多出的部分会自动转到下一行问题4:p标签的字体颜色和字体大小不生效解决方法:在上面设置了一个包含所有p标签的原创 2022-06-16 21:11:12 · 77 阅读 · 0 评论 -
flow布局实操
1.大div盒子在浏览器界面水平居中2.伸缩流方向flex-directionflex-direction 属性决定主轴的方向(即项目的排列方向)它可能有 4 个值。row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。3.实现div的圆角border-radius 所有四个边角 border-radius 属性的缩写...原创 2022-06-15 00:48:08 · 279 阅读 · 0 评论 -
dom基本操作
1. 查找节点getElement系列返回一个节点或多个节点集合,HTMLCollection对象(动态NodeList对象)1.1 getElementById()根据id属性去查找对应节点(出现多个重复id则会查找第一个出现的id元素) <div class="boxClass b" id="boxId"> <ol>  原创 2022-06-12 23:28:00 · 147 阅读 · 0 评论 -
前端模块化
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起。块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信。而模块化侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块,有了模块,我们就可以更方便地使用别人的代码,想要什么模块就加载什么模块。请求过多、依赖模糊、难以维护(1) 避免命名冲突(减少命名空间污染)函数直接暴露在js文件中可能会导致变量污染、命名冲突等情况,早期会使用匿名原创 2022-06-12 23:12:35 · 54 阅读 · 0 评论 -
flex布局
弹性盒子是一种简单而强大的布局方式,我们可以通过弹性盒子指明空间的分布方式、内容的对齐方式和元素的视觉顺序。内容可以轻易地横向排列或者纵向排列,也可以沿着某一条轴布局。弹性盒子最突出的一个特点,能让元素在不同屏幕尺寸下或者不同显示设备做好适应准备,因为内容可以根据空间的大小增减尺寸。 弹性盒子依赖的是父子关系。在父元素上面声明 来创建一个弹性容器,它主要负责内部子元素的布置,控制子元素的布局。在弹性容器中的这些子元素,一般都叫弹性元素。2. flex-direction首先从布局的大体来看,首先要决定元原创 2022-06-08 23:16:52 · 966 阅读 · 0 评论 -
js复习(函数和作用域)
1.函数的参数2.参数3.作用域原创 2022-06-03 23:00:01 · 50 阅读 · 0 评论 -
react脚手架的基本使用
react脚手架意义:1.脚手架是开发现代web应用的必备2.充分利用webpack,babel,eslint等工具辅助项目开发3.零配置,无需手动配置繁琐的工具就可以使用---------------------------------------------------------------------------------------------------------------------------------1.npx create-react-app my-a原创 2022-05-30 22:12:13 · 279 阅读 · 0 评论 -
react的基本使用
首先我们先安装react和react-dom两个包,react包是核心,提供创建元素、组件等功能,react-dom包提供DOM相关功能等。然后我们可以在package.json文件中查看是否安装成功原创 2022-05-30 19:48:00 · 81 阅读 · 0 评论