Waghhhh-优快云博客

转载输入网址到网页显示的过程是什么？

原文链接：https://blog.youkuaiyun.com/donggx/article/details/71402871从用户输入一个网址到网页最终展现到用户面前，中间的大致流程总结如下：1) 在客户端浏览器中输入网址URL。2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。5) WEB服务器响应请求，返回指定的URL.

2021-10-28 20:06:17 32805 1

原创 Css继承属性

一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-sty

2021-10-13 20:19:22 237

原创 JavaScript中实现异步编程模式的4种方法

先解释一下“同步模式”和“异步模式”：（1）同步模式：就是后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。（2）异步模式：完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。JavaScript中实现异步编程模式的4种方法,回调函数、事件监听、发布/订阅、Promises对象：（1）回调函数：

2021-10-08 19:36:18 1188

原创 BFC(Block formatting context)

BFC(Block formatting context)直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.常见的定位方案### 1.普通流1.元素按照其在HTML中的先后位置至上而下进行布局2.行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行3.所有元素默认都是普通流定位### 2.浮动元素首先按照普通流的位置出现，然后根据.

2021-09-29 10:57:58 158

原创防抖（debounce）和节流（throttle）

防抖：高频率触发事件，只取最后一次事件处理的结果应用场景：1.input事件搜索框。2.window窗体调整大小。实现例子：<body> <input type="text"> <script> const input = document.querySelector('input') input.oninput = debounce(function () { console.log(this.value); }

2021-09-28 11:13:35 153

原创 ES6中对象（Object）,数组（Array）,Set集合,Map集合API扩展。

对象（Object）API:Object.is(a,b) 判断a,b两个值是否一样，类似于但不等于===console.log(+0 === -0);//trueconsole.log(Object.is(+0, -0));//falseconsole.log(NaN === NaN);//falseconsole.log(Object.is(NaN, NaN));//trueObject.assign() 深复制或者合并对象 Object.assign(ob...

2021-09-27 20:27:02 368

原创 XMLHttpRequest对象的readyState与status

XMLHttpRequest对象的readyState与status的几种状态码表示的意思:readyState有五种状态：0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法；1 (载入)：已经调用open() 方法，但尚未发送请求；2 (载入完成)：请求已经发送完成；3 (交互)：可以接收到部分响应数据；4 (完成)：已经接收到了全部数据，并且连接已经关闭。status实际是一种辅状态判断，只是status更多是服务器方的状态判断。

2021-09-26 10:36:08 2143

原创 Vue中报错This ‘v-if‘ should be moved to the wrapper element

这是由于v-if和v-for冲突。因为v-for比 vi-if的优先级高，这就意味在每个v-for循环中，v-if将重复运行。只需要将v-if和v-for设置在不同的元素中。

2021-09-23 16:52:24 17895

原创 Vue中动态添加类名

在遇到有小菜单的切换需求时，例如菜单代码类似<div class="options"> <ul> <li>东环校区</li> <li>柳东校区</li> <li>柳石校区</li> </ul> </div>在JavaScri.

2021-09-23 15:24:01 1295

原创 html5拖拽

1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。拖动事件：dragstart、drag、dragend放置事件：dragenter、dragover、drop拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend---------------------------------------

2021-09-14 15:19:09 1547

原创 canvas画布时钟。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.

2021-09-14 15:14:52 129

原创 jQuery控制video视频（快进，回退，倍速播放等）

2021-09-13 10:38:59 4690

原创 (jQuery)动态生成的元素绑定事件

例如，在一个需要数据的表格中。<body> <div class="btns"> <button class="login">登录</button> <button class="load">加载</button> <button>新增</button> </div>  &lt

2021-09-10 16:35:58 1020

原创 HTML 和 CSS 重构网页（Steam主页）

这是刚刚学习CSS的时候，做的Steam商店主页，仅有一个简单的轮播图，和一些简单的hover样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev

2021-09-10 16:04:27 5198 4

原创 JS数组迭代方法重构

(1)myEvery如果有不满足的直接返回false,不再继续往后判断。如果全部满足，返回trueArray.prototype.myEvery=function(fun,obj){ for(var i=0;i<this.length;i++){ if(!(obj?fun.bind(obj)(this[i]):fun(this[i]))){ return false } //如果有obj传入，需要修改this指向 ...

2021-09-08 19:10:56 142

原创 JS中两种简单的属性遍历

2021-09-08 18:57:30 122

Waghhhh的博客