Web前端
关注
分享
扫一扫
Lucivita
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
获取指定年度区间数组
获取指定年度区间数组原创 2022-06-14 14:49:46 · 300 阅读 · 1 评论 -
AntDesign日期选择框按年份选择
import moment from 'moment';state = { dataopen: false, // 默认是否打开弹框 year: moment(), }// 点击选择框事件 弹出日期组件选择年 openChangeYear = (status) => { if (status) { this.setState({ dataopen: true }); } else { .原创 2022-04-29 15:00:40 · 1662 阅读 · 0 评论 -
子元素相对定位后脱离文档流对后面div位置的影响
<div className={styles.chart_box}> <div><span>信息</span></div> //添加空div高度占位 <div style={{ height: '40px' }}></div> //end <div.原创 2022-04-27 11:28:08 · 573 阅读 · 0 评论 -
JS给某id下全部li添加点击事件的方法
第一步：获取到id的dom第二步：根据获取到id的dom中获取到全部li数组第三步：遍历添加onClick原创 2021-12-17 18:31:51 · 1871 阅读 · 0 评论 -
JS中DOM对象的属性获取方法
使用getAttribute()原创 2021-12-17 18:25:20 · 1003 阅读 · 0 评论 -
JS以数组的形式进行接口参数的提交
getBridgeBaseInfoList = () => { let { technicalConditionLevelsCheckboxValue,routeCode, page, } = this.state; //单独提交 // let queryToFilters = { // 'routeCode': routeCode, // '.原创 2021-12-15 16:02:33 · 1406 阅读 · 0 评论 -
JS判断数字是否为空，字符串是否为‘‘
let key = [ { value: [] name: '数组' }, { value: '', name: '字符串' }, ] key.forEach((item) => { // console.log('item', item.value); // console.log(item.value !== ''); // .原创 2021-12-15 15:31:58 · 1135 阅读 · 0 评论 -
React项目点击其他任意地方隐藏当前DIV
1、在父子div中添加id，在父div中添加点击事件2、子div使用三元判断的形式是否显隐3、通过父元素点击事件判断是否点击的在子id区域，不是则隐藏（4、由于我是结合选项Cascader级联选择判断Checkbox多选框是否显隐，隐藏为了避免点完选项直接消失可以再加一个判断，默认为false，选完之后为ture，然后如果点击区域外则把判断显隐的标识为ture的同时在让这个额外的判断为false）以下只列出了关键代码，其余部分功能代码省略，只是实现思路，不可直接使用！！！//sta.原创 2021-12-15 14:56:34 · 2947 阅读 · 1 评论 -
span添加min-Width不生效
添加display: 'inline-block'<span style={{ display: 'inline-block', minWidth: '100px' }}>测试</span>原创 2021-10-19 18:03:47 · 2956 阅读 · 0 评论 -
将两个数组合成为对象关系
例将[1,2,3]和[a,b,c]合成为[{a:1},{b:2},{c:3}]<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><script> let a=['a','b','c'] let b=[1,2,3] l.原创 2021-10-14 16:03:30 · 176 阅读 · 0 评论 -
Echarts自定义放置提示(tooltip)
通过tooltip的formatter这里的部分是从params里面的marker属性取过来的，因为没有获取到颜色，所以用的自定义颜色数组这里的Math.abs()是绝对值，可以把负数变为正数，可根据需求是否去掉...原创 2021-08-25 15:23:37 · 302 阅读 · 0 评论 -
Echarts坐标轴日期格式化
不限X,Y轴如果数据不同更改substring（）里面的位置即可x轴也是一样的原创 2021-08-24 10:50:55 · 5952 阅读 · 0 评论 -
Echarts饼图外围装饰两条线环绕效果
外面的两个圈效果是动态的注释部分为核心代码// let angle = 0;//角度option = { backgroundColor: '#2c343c', title: { text: 'Customized Pie', left: 'center', top: 20, textStyle: { color: '#ccc' } }, to..原创 2021-08-18 16:47:27 · 3110 阅读 · 0 评论 -
AntD中Pagination 只有一页时隐藏分页器
hideOnSinglePage: true，true是隐藏添加hideOnSinglePage，只有一页的分页被隐藏掉原创 2021-08-17 17:20:31 · 1356 阅读 · 0 评论 -
Echarts饼图自定义颜色配置（图色、选择颜色、字体颜色）
颜色配置（字体颜色，渐变0颜色，渐变1颜色，选中时阴影颜色）rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。透明度（A）取值 0~1 之间， 代表透明度。series配置样式...原创 2021-08-16 14:36:39 · 5771 阅读 · 0 评论 -
Echarts饼图默认数据最多的高亮（即被选中状态）
通过forEach比较出最大的数据然后获取到最大数据index配置鼠标监听事件成功原创 2021-08-16 10:46:05 · 908 阅读 · 0 评论 -
antd框架Menu中设置selectedKeys出现点一条多条被选问题
是由于未按照数组格式书写this.setState({selectedKeys:[data.key]}即可如需取消选择：this.setState({selectedKeys:['']})原创 2021-08-13 17:53:35 · 4386 阅读 · 0 评论 -
含计时器（setTimeout）执行顺序
let a = () => { setTimeout(() => { console.log("任务队列函数"); }, 0); for (let i = 0; i < 1; i++) { console.log("for循环"); } console.log("事件执行完");};a()当主线程将执行栈中所有的代码执行完之后，主线程将会去查看任务队列是否有任务。如果有，那么主线程会依次执行那些任务队列中的回调函数。主线程循环：即主.原创 2021-08-05 15:02:46 · 857 阅读 · 0 评论 -
使用map或forEach生成对应的数组或对象
生成名字数组和{value:'',name:''}对象数组let data =[{sName:'a',sData:1},{sName:'b',sData:2},{sName:'c',sData:3},]//forlet thisNameData = [];let chartSpanData = []let thisData = []for (let i = 0; i < data.length; i++) { thisNameData[i] = data[i].sNa..原创 2021-07-30 15:27:31 · 645 阅读 · 0 评论 -
通过sort进行关联排序（可带同数组对象）
<html><body><script type="text/javascript">var arr = new Array(6)arr[0] = {Num:10,dd:'k'}arr[1] ={Num:5,dd:'aa'}arr[2] = {Num:7,dd:'bbb'}var ww = arr.sort((a,b)=>{ return b.Num-a.Num});document.write(ww[0].dd)document.wri.原创 2021-07-28 17:22:04 · 249 阅读 · 0 评论 -
Echarts饼图（pie）由普通修改为大小不同图
在series中添加roseType: 'radius',原创 2021-07-28 16:59:14 · 1470 阅读 · 0 评论 -
安装 React 开发者工具（react-devtools）
1.先去git上下载react-devtools文件到本地https://github.com/facebook/react-devtools/tree/v32.进去下载下来的文件夹同时按下shift+鼠标右键，打开命令窗口3.npm依赖安装npm --registry https://registry.npm.taobao.org install4.安装依赖成功后，打包一份扩展程序npm run build:extension:chrome5..原创 2021-07-14 15:38:55 · 1353 阅读 · 0 评论 -
addEventListener与attachEvent绑定事件的兼容问题
function addEvent(elem, text) { if (elem.addEventListener) { //非ie和非ie9 elem.addEventListener('click', text); } else if (elem.attachEvent) { //ie6到ie8 elem.attachEvent('onclick', text) }}DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：a.原创 2021-07-14 11:06:23 · 374 阅读 · 0 评论 -
数组中多个相同数据，去掉的重复数据只留下最后一个显示，其他为空
const Data = [a,a,a,b,b,c]for (let i = 0; i < Data.length; i++) { ((Data[i] === Data[i - 1]) || (Data[i - 1] === '')) ? Data[i - 1] = '' : Data[i]; }console.log(Data); //'','',a,'',b,c原创 2021-07-12 14:42:45 · 1012 阅读 · 0 评论 -
如何切换Echarts主题
一、打开Echarts官方文档点击资源 -> 主题构建工具进入到主题选择页面二、选择默认主题点击默认方案选择合适的主题例如选择macarons，点击后右侧展示对应主题效果三、应用主题1.下载主题点击下载主题，建议选择JSON版本，点击下面下载便会生成一个JSON文件2.项目使用把JSON文件放入项目的某个文件夹中，在需要使用Echarts的文件中导入。//引入import macarons from '../.....原创 2021-07-12 14:20:21 · 2607 阅读 · 0 评论 -
（转载）vue 中 Axios 的封装和 API 接口的管理
如图，面对一团糟代码的你~~~真的想说，What F~U~C~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resou..转载 2021-07-02 15:24:26 · 290 阅读 · 0 评论 -
app.json中json注释问题
在json文件中添加注释报错，不能写注释，系统解析时会报错原创 2021-02-16 20:46:32 · 1319 阅读 · 0 评论 -
setData‘ of undefined解决方法
（1）.定义let _this = this;（2）.推荐使用箭头函数原创 2021-02-16 20:44:33 · 729 阅读 · 0 评论 -
通过base64使用图片
小程序背景图片background不允许使用网络图片，只能使用本地图片或base64，这时可以通过base64使用图片（1）搜索base64图片在线转换工具https://www.qvdv.com/tools/qvdv-img2base64.html（2）下载图片，上传并点击开始转换（3）复制编码然后使用...原创 2021-02-16 20:43:22 · 656 阅读 · 0 评论 -
网页设计综合应用：自选网站，实现HTML和CSS编码
目录一.效果图二.布局分析2.1：首先将整个页面分为两大部分2.2：左侧侧边栏部分2.3：右侧主体部分三.HTML代码3.1左侧侧边栏部分3.1.1：侧边栏部分左侧3.1.2：侧边栏部分右侧3.2：右侧主体部分3.2.1：主体头部部分3.2.2：主体左侧部分3.2.3：主体右侧部分四.CSS代码 4.1：整体布局4.2左侧侧边栏部分4.2.1：侧边栏部分左侧4.1.2：侧边栏部分右侧4.2：右侧主体部分4.2...原创 2021-01-21 14:45:33 · 806 阅读 · 0 评论 -
网页布局综合练习
目录1.练习：分别用两种模型按图中标注的参数设置以下两个元素。盒子一： 盒子二：2.综合练习一.HTML代码二.CSS代码三.效果图1.练习：分别用两种模型按图中标注的参数设置以下两个元素。分析：ie盒子和标准盒子的区别在于ie盒子的height和width包括border和padding盒子一：html代码<body><div class="one">标准盒子</div> <di...原创 2021-01-21 14:33:02 · 1112 阅读 · 0 评论 -
综合练习：京东排行版（CSS元素透明度设置及图文居中对齐综合练习）
一.目标分析图总的用列表三个li分别编辑文字，左侧的序号可以用背景图片完成，只要完成第一个，后续复制粘贴文字稍作改动即可。二.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...原创 2021-01-19 17:18:07 · 193 阅读 · 0 评论 -
CSS基本规则综合应用
一、HTML编码：1.html设计分成两个部分，箭头和中间图片内容，先设置好一个，其余样式相同，箭头用img，中间内容放在li中2.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...原创 2021-01-19 17:15:59 · 213 阅读 · 0 评论 -
CSS选择器典型应用
1. 自己编写案例解释如何用::after伪元素清除浮动1.1消除浮动前<style> .main{ background-color: pink; width: 300px; } .main>div{ width: 100px; height: 100px; border: 1px solid red; float: left; }</s.原创 2021-01-19 17:12:04 · 452 阅读 · 0 评论 -
语雀个人资料页界面实现
第一步：编写页面结构1. 分析结构将页面分为页头、主体、页脚三部分。2. 根据页面结构完成HTML编码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi原创 2021-01-19 17:07:44 · 2792 阅读 · 1 评论 -
字体图标引用的项目案例
第一步：构建页面HTML框架分析页面布局将页面分为三个大部分，页面主体分为左右两部分，构建五个div并且分别命名第二步：编写页面HTML代码1.界面图标选择1.1阿里图标选择相关图片*也可选择icomoon下载导入图标* 1.2将链接导入head中2.页面代码编写2.1页头部分 2.2主体内容左侧部分 ...原创 2021-01-19 16:43:10 · 227 阅读 · 0 评论 -
使用Flex布局实现携程APP首页布局
一、整体分析这次作业主要是使用flex布局完成携程的手机界面，大体我认为可以分为六部分二、具体样式实现1、全局样式设置导入normalize.css并设置一下body2、搜索栏<div class="short-search"> <div class="search"> <p>搜索:目的地/酒店/景点/航班号</p> </div> &.原创 2021-01-19 16:28:54 · 2214 阅读 · 1 评论 -
利用媒体查询实现仿星巴克首页布局页面
一：思路1.1.大致布局星巴克的首页一共分为三种不同的媒体查询，当宽度小于641px时为手机版，大于641px小于1025px时为平板或小屏电脑版，大于1025px时为电脑版。1.2.具体布局1.电脑版(screen and (min-width:1025px))电脑版网页主要分为两大部分，分为左侧可以随页面滚动的container和右侧的官网具体内容。（1）container包括上放的导航栏，中间的登录注册部分 （2）content具体内容从上到下...原创 2021-01-19 16:04:03 · 1517 阅读 · 0 评论 -
以iphone 6的视口为标准实现仿微信发现界面
一、布局分析首先把界面分为上中下三个部分进行编辑，第一部分是头部，第二部分是中间主体，第三部分是尾部。（1）head：分为左右两部分，分为左侧文字和右侧两个按钮（2）main主体部分：分为八个盒子find，每个盒子中由a标签包含，右侧设置盒子prompt，包含文字和>（3）menu底部：分为四个盒子，每个盒子由a标签中包含图片和文字二、具体实现1.页头<!-- 头部 --> <div class="hea.原创 2021-01-19 15:38:10 · 321 阅读 · 0 评论 -
使用vue突然爆错数据不显示报：Uncaught SyntaxError: Invalid shorthand property initializer
原因: data中的属性冒号写成了"="号解决方法: 等号改成冒号原创 2020-05-28 15:44:30 · 647 阅读 · 0 评论