![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 64
饮尽杯中月
这个作者很懒,什么都没留下…
展开
-
AJAX用法
HTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则。请求报文重点是格式与参数行 POST /s?ie=utf-8 HTTP/1.1 头 Host: atguigu.com Cookie: name=guigu Content-type: application/x-www-form-urlencoded User-Agent: chro原创 2021-02-03 20:44:54 · 90 阅读 · 0 评论 -
Promise全解析
1 为什么需要promise需求通过ajax请求id, 再根据id请求用户名, 再根据用户名获取email回调地狱在回调函数中嵌套回调Promise解决了回调地狱2 Promise的基本使用Promise是一个构造函数, 通过new关键字实例化对象语法new Promise((resolve, reject)=>{})Promise接受一个函数作为参数在参数函数中接受两个参数resolve: 成功函数reject: 失败函数promise实例p原创 2021-01-31 09:46:33 · 723 阅读 · 1 评论 -
VuePress快速构建博客
本地:创建并进入一个新目录mkdir vuepress-starter && cd vuepress-starter使用你喜欢的包管理器进行初始化yarn init # npm init将 VuePress 安装为本地依赖yarn add -D vuepress # npm install -D vuepress创建你的第一篇文档mkdir docs && echo '# Hello VuePress' > docs/README.原创 2021-01-20 13:31:58 · 142 阅读 · 0 评论 -
构造函数和原型
商品查询案例-利用数组新增方法操作数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2021-01-18 19:00:25 · 69 阅读 · 0 评论 -
函数高级(闭包、递归、深浅拷贝)
闭包的实例1.点击li输出当前li的索引号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&原创 2021-01-18 16:20:24 · 169 阅读 · 1 评论 -
Javascript之BOM
总结案例:1.倒计时效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2021-01-03 20:25:51 · 103 阅读 · 0 评论 -
移动端特效
总结案例1.轮播图需求:1.可以自动播放图片2.手指可以拖动播放轮播图实现:小圆点跟随变化:①小圆点跟随变化效果②把ol里面li带有current类名的选出来去掉类名 remove③让当前索引号 的小li 加上 current add④但是,是等着过渡结束之后变化,所以这个写到 transitionend 事件里面手指滑动轮播图:①手指滑动轮播图②本质就是ul跟随手指移动,简单说就是移动端拖动元素③触摸元素 touchstart: 获取手指初始坐标④移动手指 touchm原创 2021-01-03 20:00:49 · 169 阅读 · 0 评论 -
PC端网页特效
1.总结:2.实例1.拖动的模态框要求:1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。4.鼠标松开,可以停止拖动模态框移动。思路:①点击弹出层, 模态框和遮挡层就会显示出来 display:block;②点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;③在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标④触发事件是原创 2020-12-30 20:07:09 · 144 阅读 · 0 评论 -
javascript 之DOM
1.仿京东显示密码①核心思路: 点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码②一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框③算法:利用一个flag变量,来判断flag的值,如果是1 就切换为文本框,flag 设置为0,如果是0 就切换为密码框,flag设置为1 // 1. 获取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById原创 2020-12-20 20:38:53 · 160 阅读 · 0 评论 -
JavaScript预解析
f1();console.log(c); console.log(b); console.log(a); function f1() { //相当于var a = 9; b = 9; c = 9; b和c直接赋值,没有声明,当全局变量看 //易混淆:集体声明 var a = 9, b = 9, c = 9; var a = b = c = 9; console.log(a); console.log(b); console.log(c);}执行顺序:function f1(原创 2020-12-07 13:25:24 · 240 阅读 · 0 评论 -
移动端web总结
1.流式布局(百分比布局)1.流式布局,就是百分比布局,也称非固定像素布局。2.通过盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。2.flex布局1.flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。2.当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 =原创 2020-12-03 11:10:17 · 247 阅读 · 0 评论 -
响应式布局
阿里百秀案例1.width:100%;1.1 box-sizing为content-box时width:100%;表示width=父级的width父级的width不包括其内边距和边框值1.2 box-sizing为border-box时width:100%;表示width=父级的width父级的width包括其内边距和边框值1.3实践3处的空白间隔:1号盒子padding-right:10px 2号盒子width:100%,此处为默认的content-box所以width:100原创 2020-12-02 15:16:57 · 941 阅读 · 0 评论 -
rem布局
苏宁1.body的设置1.1 less + 媒体查询 + remmax-width: 750px;可以省略因为给了width:15rem;写死了body { min-width: 320px; /*给了width:15rem;写死了*/ width: 15rem; margin: 0 auto; line-height: 1.5; font-family: Arial,Helvetica; background: #F2F2F2;}1.2 f原创 2020-12-01 12:40:42 · 130 阅读 · 0 评论 -
flex布局
1.CSS3中行高=高时,文字没有垂直居中原因:设置box-sizing:border-box后设置的盒子的高,包含padding和border,所以此时想文字垂直居中,需要行高=高-padding-border才行。原创 2020-11-28 12:23:22 · 621 阅读 · 0 评论 -
流式布局
1.精灵二倍图原因:精灵图缩放后位置发生了变化二倍精灵图做法:1.在firework里面将精灵图缩放为原来的一半2.根据大小 测量坐标3.注意代码里面background-size也要写:原来精灵图的一半注意:因为虽然在firework里面将缩放为一半后测量的,但是实际导入背景的精灵图没有缩放 */.sou { /* 精灵图缩放后位置发生了变化 */ /* 二倍精灵图做法: */ /* 1.在firework里面将精灵图缩放为原来的一半 */ /* 2.根据大原创 2020-11-26 09:45:52 · 105 阅读 · 1 评论 -
HTML5+CSS3
三角形代码实现:1.div { width: 40px; height: 40px; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 10px solid blue; border-left: 10px solid #000; }2.原创 2020-11-18 20:52:36 · 875 阅读 · 0 评论 -
品优购项目
1.font:不需要设置的属性可以省略(去默认值),但是必须保留font-size和font-family属性,否则font属性将不起作用。2.em是一个相对单位,就是当前元素(font-size)一个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小。...原创 2020-10-10 13:28:26 · 1067 阅读 · 0 评论 -
HTML入门
原创 2020-09-13 14:18:28 · 93 阅读 · 0 评论