- 博客(50)
- 收藏
- 关注
RSS订阅原创 react调试接口的时候报错TypeError: Object(...)(...).then(...) is not a function“
最终发现是异步函数的引入问题报错说batchDeletion TypeError: Object(…)(…).then(…) is not a function"结果是deleteMessage的引入错误deleteMessage引入react jsx时必须加括号 { },否则就会报错
2020-10-17 11:44:50
2130
原创 React 如何正常渲染一段HTML字符串
function showhtml(htmlString){ var html = {__html:htmlString}; return <div dangerouslySetInnerHTML={html}></div> ;}
2020-10-16 14:14:16
483
原创 webpack4.x项目的使用
1、npm init -y 快速初始化项目2、在项目根目录创建一个源代码目录src和dist产品目录3、在src目录下创建index.html4、 使用cnpm安装webpack，运行 cnpm i webpack -D全局运行npm i cnpm -g5、注意webpack4.x 提供了约定大于配置的概念，目的是为了尽量减少配置文件的体积；默认约定了：在 webpack 4.x中，有一个很大的特性，就是约定大于配置打包的入口文件src-> index.js打包的输出文件是 dist
2020-10-07 14:14:05
181
原创 vscode如何在js文件中输入标签名按Tab补全
在setting中输入include language点击Edit in setting json添加以下代码就可以实现补全标签代码了
2020-09-29 21:38:25
858
原创 前端面试题num1
1、首页加载过慢怎么办vue-cli npm run build命令默认同意打包依赖可能是因为vendor.js过大，打包的时候把所有的第三方依赖都打包放进去了，解决方法：使用externals引用第三方资源，防止element资源被打包到自己项目中这里有解决方法2、没有宽高的盒子怎么居中<body> <div class="ided"> </div></body>方法1：让未定义宽高的图片上下左右距离都为0.然..
2020-09-22 21:39:22
202
原创 axios封装使用
首先把需要的接口名放在一个api.js中、然后再在http文件夹下的index.js中初始化配置import axios from 'axios'const $axios = axios.create({baseURL:'/api'，timeout:3000})在main.js中引入请求和接口地址import $axios from './http'import $api from './assets/js/api'Vue.prototype.$api = $api;Vue.pro
2020-09-18 12:18:30
178
原创 cookies sessionStorage和localstorage区别以及localStorage的使用方法
请描述一下 cookies sessionStorage和localstorage区别（1）相同点：都存储在客户端不同点：1.存储大小· cookie数据大小不能超过4k。· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。123（2）有效时间· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；· sessionStorage 数据在当前浏览器窗口关闭后自动删除。· co
2020-07-06 22:36:34
154
原创 无缝轮播图手机端
原理：如果轮播图一共有3张那么有需要有重复的三张图片以相同的结构放在后面，当按下第一张图片的时候因为第一张前面没有图了就直接跳转到第四张，进行滑动，如果滑动到了第6张，那么第六张后面没有图片了，就在按下的时候跳转到第三张。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
2020-07-06 22:14:42
191
原创 ajax封装运用
/*请求方式：type 非必传，默认get请求地址：url 必传是否异步：async 非必传设置头请求：contentType 非必传请求数据：data 非必传*/ajax({ 'url': 'b.txt', 'success': function(res){ console.log(res); // 将字符串计算: eval(要转的数据) con
2020-06-30 21:32:39
83
原创 js事件代理
将事件添加到父元素身上，当事件发生的时候，父元素会找到对应触发事件的子元素去处理，后期添加的子元素也有这个效果 <script> var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function(ev){ var oEvent = window.event||ev; var target = oEvent.target || oEvent
2020-06-22 17:43:06
110
原创 懒加载
n张图片 <div class="box"><img src="" _src="./img/1.jpg" alt=""></div> <script> //获取屏幕 的可视高度 var wh = document.documentElement.clientHeight; var imgs = document.getElementsByTagName('img'); //WINDOW滚
2020-06-21 16:48:57
88
原创 快速排序
<script> var array = [13, 0, 7, 9, 14, -4, 26, 32, 1.2]; var m = quickSort(array); console.log(m); function quickSort(arr){ //结束条件 if(arr.length<=1){ return ar...
2020-06-20 22:24:26
87
原创 js数组去重
方法一 <script> var arr =[ 11,21,33,34,45,212,11,33]; for(var i = 0 ;i< arr.length;i++) { for(var j = i+1;j<arr.length;j++){ if(arr[i] == arr[j]){ arr.splice(j,1);//从数组的第
2020-06-20 21:26:19
73
原创 未来时间倒计时
// 现在时间距离未来某个时间还有多长时间 // 时间戳----毫秒 求毫秒差值 未来时间比较大 // 未来时间时间戳 - 现在时间时间戳 //获取月份 0--对应1月 以此类推 var future = new Date(2020, 10, 11); moveTime(); // 定时器 setInterval(moveTime, 1000); function m...
2020-06-19 13:35:17
373
原创 获取非行间样式
兼容: 一个是方法，一个是属性, 用方法是否存在来判断 if (window.getComputedStyle) { // 标准浏览器 console.log(getComputedStyle(div).width); } else { // ie浏览器 console.log(div.currentStyle.width); } //..
2020-06-15 22:56:11
108
原创 一个简单的选项卡
<body> <button>按钮一</button> <button>按钮二</button> <button>按钮三</button> <div class="box active"> 内容一 </div> <div class="box"> 内容二 </div> <di.
2020-06-12 13:53:13
104
原创 js获取元素的方法（getElementById、getElementByTagName、getElementByClassName）
getElementById：1、获取具体的某一个元素2、直接去使用和操作3、只能通过document获取4、静态：在获取的时候存在就是存在，不存在就是不存在；先获取后添加拿不到getElementByTagName、getElementByClassName：1、集合2、需要通过下标获取到具体的元素之后在使用和操作3、既可以是document也可以是父元素4、动态性：获取的时候没有，后面添加的，后续也能拿得到；先获取后添加也能拿到5、className只支持IE8以上...
2020-06-11 19:52:10
3074
原创 js中对this的解释以及使用实例
this：存在于页面的任何位置，要么在函数中要么在函数外全局中this指向window普通函数：this指向window事件处理函数：事件触发谁就是谁，触发源–点谁就是谁<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li&
2020-06-11 17:43:09
152
原创 强制转换Number
Number(要转换的数据): 将数据转换成number类型, 可转换: 空字符、空格字符、纯数字字符串、 布尔、null\空数组\数组中有一项并且为数字字符串var str = ''; // 空字符串console.log(typeof str);console.log(Number(str)); // 0console.log(Number(' ')); // 0console.log(Number('abc')); // NaNconsole.log(Number('1234'));..
2020-06-09 21:34:21
407
原创 js中 的null和undefined
1、null:只有一个值，就是自身，typeof以后结果是object2、undefined：只有一个值，就是自身，typeof以后还是undefined。3、null和undefined的区别：null本身就是空，undefined表示未初始化，声明未赋值。var n = null;var m = undefined;console.log(n, m);console.log(typeof null); // objectconsole.log(typeof undefined); //
2020-06-09 20:26:28
83
转载 文本内容内容只有一行的时候居中，有多行时文字居左显示
<div class="box"> <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字-新增文字-新增文字</p></div><!-- 按钮 --><p><button id="btnMore">更多文字</button></p>.box { padding: 10px; background-color: #cd0000;
2020-06-07 21:09:02
458
原创 rem布局、rem+vw结合布局
rem布局var deviceWidth = document.documentElement.clientWidth;//设计稿750px 1rem = 100px 设计稿宽度（750px）/100px(预设字体基础值自定义方便计算) = deviceWidth（可变）/font-size（fs）if(deviceWidth > 750) { deviceWidth = 750;}var fs = deviceWidth/7.5;document.documentEl
2020-06-03 14:34:13
435
原创 checkbox设置选中样式（使用label）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #myCheck + label{
2020-06-02 21:20:24
1545
原创 css特殊字体引入
@font-face {font-family:yourfont; /*(自己取名)*/src:url(字体文件地址);}/*引入字体 */.a {font-family:yourfont;font-size:12px;}
2020-05-22 09:37:21
134
原创 图片下方间隙问题
解决方法：给图片的父元素设置font-size:0;给图片转化成块 display：block；给图片设置 vertical-align：bottom/top/middle;
2020-05-18 17:50:09
105
转载 利用vertical-align:middle垂直居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS垂直居中</title> <style> .wrapper{ width: 500px; height: 500px; background-color: pink;
2020-05-16 11:18:55
103
原创 标签的分类
块级标签（div，p，h1-h6，ul，li，ol，dl，dt，dd）独成一行，可以设置宽高如果没设置宽度（父级的百分之百）；没设置高度（高度由内容撑开）支持四周的内外边距（padding margin）内联标签（行内标签 em，i，span，strong，b，a）内容的宽高是多少，就占多大位置，不可以设置宽高内联标签可以一排显示不可以设置垂直方向的内外边距（padding margin）内联块标签（行内块标签 img，input，select、textarea）..
2020-05-16 10:35:12
156
原创 a标签（锚点链接）
页面内锚点链接点击对应的a标签跳转到对应的div位置 <a href="#yonge">咏鹅</a> <a href="#yongliu">咏柳</a> <a href="#yongchun">咏春</a> <div id="yonge" style="height: 1000px;background-color:red;"> 鹅鹅鹅，曲项向天歌 </div> <d
2020-05-15 18:29:12
3563
原创 CSS三大特性（选择器优先级）
1、层叠性当选择器权重一样时，应用下边的样式（遵循就近原则）2、继承性font-size font-family font-weight font-style line-height color text-decoration text-indent text-align以font- line- text- 开的头和color这些属性都是可以被继承的3、优先级选择在同一个标签身上时，比较权重，权重大的优先级就大；选择在同一个标签身上，权重相同就遵循就近原则；下面的覆盖上面的样式选择在
2020-05-15 16:28:35
254
原创 选择器进阶1(后代，子代，群组，交集，伪类，兄弟)
后代选择器/* 后代选择器可以选中儿子、孙子、... */ .box p{ color: green; } p span{ color: red; } <!-- 选中box里边的div --> <div class="box"> <p>p1</p> <div>div1</div>
2020-05-15 15:34:08
154
原创 多选框和单选框的设置type=‘radio’和type='checkbox'
input标签中radio和checkbox男女type=‘radio’类 name属性相同 才能进行单选 请同意什么协议文字与input标签进行绑定，通过label的for属性，给input标签设置id，此时在鼠标选择文字的时候也可以选中input标签。...
2020-05-14 15:29:58
2887
原创 rem+媒体查询解决移动端
分别适应不同移动端宽度320px，360px，375px，414px，540px，640px，750pxmin-width:320px意思是选择屏幕宽度大于320px@media screen and (min-width:320px) {/psdWidth:750px 预设字体基础值 100px 1rem=100px/html{font-size: 42.67px;}@media screen and (min-width:360px) {html{font-size: 48px;
2020-05-10 12:29:48
180
原创 二倍图技术
插入精灵图为背景图当拿到美工精灵图稿时，需要注意图片大小的改变。.psd 750px --> 适配屏幕宽度为375px主流设备psd: 640px—> 320px可能psd的 图片比要用的大两倍假如你有一张精灵图原大小80px 乘以400px 那么你用的时候就需要通过backgorund-size属性设置大小为40px 200px 以下的百分比适不适合这里使用的 /* 5...
2020-05-07 22:03:48
229
原创 属性选择器
5个基本的属性选择器1. 通过属性名选择器[属性名字] {} 匹配的是拥有这个属性的元素[class] { }[id] { }[a] { } a自定义属性2.属性名和属性值去选择元素[属性名=“属性值”] {}3. 属性名，属性值，^^ 以什么字符开头[属性名^="xxx"] 匹配的是拥有此属性的，并且属性值以xxx开头的元素不要给属性值后面或者选择器里加上空格 因...
2020-05-06 09:29:52
1485
原创 css单行与多行文本溢出以省略号收尾
单行文本溢出部分加省略号英文字母+数字 溢出不换行(默认) .dv1 { width: 200px; border: 1px solid #000; /* 不换行 */ white-space: nowrap; /* 盒子溢出隐藏 */ ...
2020-04-24 15:44:34
116
原创 html经典布局（两列自适应，三列自适应，伪等高，真等高）
自适应:随着浏览器窗口宽度大小自己调整宽度的盒子就叫自适应盒子(相对关系%)1. 两列自适应布局原理: 两个盒子 左列的盒子固定宽度（px），右列盒子宽度自适应(%)实际案例：B站的创作中心** <style> * { padding: 0; margin: 0; } .l...
2020-04-24 13:12:47
754
原创 透明度设置(IE浏览器透明度的解决)
1、背景透明 内容不透明css background-color:rgba(); alpha 透明度 0-12. 背景透明+ 内容透明opacity:0-1 透明度IE8及其以下不支持rgba(),opacity (因为这两个属性是新增的属性 出生在IE8出生之后)IE专属的透明度设置filter:Alpha(opacity=30); ?透明度值 是0-100的值 30 === ...
2020-04-22 19:30:49
3465
原创 常见的浏览器解析问题
图片下间隙问题现象：图片和包裹图片的盒子的底边框有一定的距离 大约3px原因：解决：方法1：修改图片对齐方式为不是基线对齐即可(top,middle,bottom) vertical-align方法2: f父盒子加font-size:0px; line-height:0px;**方法3：**将图片转换为块类型元素 <div class="box"> &...
2020-04-22 19:13:45
130
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人