- 博客(23)
- 收藏
- 关注
RSS订阅
原创 angular+ionic写瀑布流布局（仿小红书）
项目需求：1.用angular+ionic实现瀑布流布局2.实现下拉无限加载流程：定义一个container，在container中存在多个box，box里面放置图片还有内容1.首先获取container中的所有box。2.获取box的宽度和屏幕的宽度。3.获取在当前屏幕宽度可以放置多少个box。4.将所有的box的高度放到一个数组里面。5.遍历数组，获取到第一行个高度最小的box。6.遍历数组的下标到第二行1的时候将第二排的第一个元素放在第一行高度最低的元素下面。以此类推7.下拉刷新
2020-10-30 10:17:51
1365
2
原创 图片下方三像素原因及解决办法
img标签在HTML5和HTML4.0.1的严格模式渲染的时候，下面会有几像素的空白，也就是常说的图片下方三像素的bug。场景：一个div里面套一个图片，加一个遮罩层的效果就会显示这个问题。原因：因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行符/空格间隙问题”。解决办法1.img标签的父标签增加font-size:0;body{ font
2020-11-18 09:28:57
939
原创 0.5px的边框线遇到的坑
奇怪的需求，要0.5px的边框线，有一个巨简单的方法，怕我忘了记录一下使用box-shadow的方法box-shadow: 0 0 0 0.5px black;一句话搞定兼容问题这种方式在chrome可以，但是firefox会出现如下情况（将其设置为0.6就会恢复正常，但是设置为0.4,box-shadow就全部消失了）...
2020-10-14 12:25:49
541
原创 用css让div自动撑满屏幕
写项目遇到了一个问题，div自动铺满屏幕，以适配不同屏幕的大小，查了资料，找个一个特别简单的办法，记录一下需求描述：1.页面有一个公共的头部，高度固定。2.下面是正文的div，要求让这个div自动撑满高度，底部不要有白屏缝隙，不能出现滚动条。写一个小demohtml部分<div class="main"> <div class="top"></div> <div class="content"></div> &
2020-10-14 12:19:02
2624
转载 axios数据请求
axios一、数据请求封装1、回调函数的方法2、关于promise的方法二、拦截器三、axios登录的请求写法四、请求报错的解决方法五、axios数据请求封装一、数据请求封装注：下载axiosnpm install --save axios1、回调函数的方法1）在src——>api——>request.js// 引入import axios from 'axios';// 对其进行暴露(让其在外面传入； success，failure他俩都是参数 succe
2020-09-06 11:39:29
154
原创 es6之扩展运算符 三个点（...）
es6之扩展运算符 三个点（…）es6之扩展运算符 三个点（…）对象的扩展运算符数组的扩展运算符总结es6之扩展运算符 三个点（…）对象的扩展运算符理解对象的扩展运算符其实很简单，只要记住一句话就可以：对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }上述方法实际上等价于:let bar = { a: 1, b: 2 };l
2020-08-19 15:10:38
152
原创 echarts 中国地图信息量
效果如下：第一步：下载：控制台下载：npm install echarts --save第二步：引入 ECharts通过标签方式直接引入构建好的 echarts 文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script>
2020-08-17 23:18:18
269
原创 react踩坑系列之 Super expression must either be null or a function, not undefined
react踩坑系列之 Super expression must either be null or a function, not undefined最近写react的时候，出现了这个报错总结下面几个问题：第一个：这个不加（）不加（）不加（）第二个：首字母大写大写大写正确写法：害！面壁思过去了...
2020-08-17 23:06:55
1099
1
原创 分页布局
分享一个分页布局的案例，<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #box{ width: 700px; height: 300px;
2020-06-23 09:55:09
237
原创 简单的购物车功能
效果图如下代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> table{ width: 600px; height: 300px; margin: 0 auto; text-align:center; border-collapse: collapse
2020-06-19 16:33:43
169
原创 ajax封装
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body></html><script> //type:请求方式 //url:地址 //isAsyn:是否异步 //data:参数 是以键值对的方式传入 //callBack.
2020-06-19 16:29:19
151
原创 cookie的总结和封装
什么是cookie:会话跟踪技术什么是会话session：用户进入网站 开始浏览到结束浏览的这样的一个过程 就称为一次会话会话跟踪技术: 浏览器（B端）和服务器 之间在进行多次请求数据时，数据共享的过程 就称为 会话跟踪技术cookie的生成过程： 打开浏览器—>输入网址—>回车—>域名解析—>访问服务器—>返回主页—>将cookie存储在浏览器用户要访问二级页面时，打开新的窗口，会自动判断上一个页面中是否含有cookie,如果有，就将cookie数据带入到
2020-06-19 15:54:47
98
原创 跨域访问百度，实现下拉菜单
跨域访问百度，实现下拉菜单，比较简单的写法。注意：运行的时候记得打开phpstudent；删除地址栏的端口号如8020；附上运行结果，如下上代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> 跨域访问百度，实现下拉菜单</title><style&g
2020-06-19 15:41:50
295
1
原创 js电商的简单放大镜效果详解
j放大镜分享<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> #small-box{ width: 200px; height: 200px; background-image: ur## 标题l(img/0.jpg); background-size: 200px
2020-06-10 19:39:54
154
原创 js写瀑布流
简单的瀑布流分享一下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; position: absolute; } </style> <
2020-06-10 19:26:58
82
原创 js自动轮播的轮播图注释详解
上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #oImg{ width: 500px; height: 300px; background-size: 500px 300px;
2020-06-10 18:01:46
306
原创 简单的贪吃蛇游戏
上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>贪吃蛇游戏</title></head><style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; } canvas {
2020-06-07 11:43:39
220
原创 正则表达式
正则表达式1.正则：正确的规则什么是正则表达式：字符的规范格式 正则表达式(regular expression)是一个描述字符规则的对象。如：只能出现字母，只能出现数字，前三个必须是数字等。 前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻，如邮箱验证，手机号码，等等。比起用字符串的函数来判断简单，易用。正则表达式的组成：普通字符 或者 特殊字符定义:1.字面量var reg = /普通字符或者特殊字符/修饰符reg.test(“目标字符串”)：判
2020-06-04 09:53:27
167
原创 鼠标点击事件的小案例
下面写分享一个鼠标点击的小案例，点击图片就会跳一下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ height: 100px; width: 100px; background-image: url(img/aido.jpg); background-si
2020-06-01 16:03:38
387
原创 键盘事件对象
事件事件的三要素：事件元素，事件类型，事件对象事件: 对某个元素的某种操作事件对象：当某个事件触发时产生的对象，就是事件对象。event使用前提，必须有事件 不同的对象产生的事件不同。下来我简单描述一下键盘对象：keyUp: 用户释放某一个按键时发生document.onkeyup=function(){ console.log("松开咯");keyDown: 用户按下按键时发生(如果按下去不松开，就会一直执行)document.onkeydown=function(){ consol
2020-06-01 15:06:31
378
原创 编写函数map(arr)把数组中的每一位数字都增加30%。
编写函数map(arr)把数组中的每一位数字都增加30%。var arr=[1,2,3,4]; //定义数组的值function map(arr){ //定义一个函数Map（arr） for(var i=0;i<arr.length;i++){ //定义变量i， arr[i]=arr[i]*(i+0.3) //在原数组的基础上加30% } return arr; //返回数组重新循环，直到条件不符
2020-05-26 18:29:40
1775
5
原创 js数组常用方法
数组:可以理解为数据的集合var arr1=["a","b","c","d","e","f"]; // 数据可以是任何类型，顺序排列，可以重复var arr2=[6,2,4,5,8,0,2,1,3,5,6]; // 把数组中的每个数据叫做元素，简称元，元素间使用逗号分隔console.log(arr1[0]); // 数组中的数据按照顺序排列，从0开始，把这个叫做索引，也叫做下标...
2020-03-29 16:10:57
89
原创 浮动属性
#css浮动属性float：left/right/none在默认情况下，块元素是自上而下的显示顺序如下：默认情况下显示：float的作用：让上下排列的元素可以并排显示。接下来，加上浮动属性：加了浮动显示如下:注意：1.元素加了float属性之后就飘在了上面，原本在标准文档里的位置就不占有了，后面的会填上来。2.如果有很多个元素要在一排显示，那么给每个元素都要添加float...
2020-02-25 09:41:15
135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人