Waste~-CSDN博客

原创 CSS 高度塌陷解决方法

浮动主要造成了父元素高度塌陷，以至于父元素很多像背景颜色，边框等都不能正确的显示出来以及同级子元素的位置我们先来看一下正常高度塌陷效果.wrapper-min{ width: 300px; border: 3px solid black; background-color: yellow; }.wrapperdzy{ width: 50px; height: 50px;}.wrapper-dyz1{ background-color: red;

2021-06-03 19:11:10 178 1

原创 node.js之HTTP模块

安装方式1.我们学任何一门语言如果不会怎么办当然是去他的官网下面是官网地址https://nodejs.org2.***淘宝镜像https://npm.taobao.org/mirrors/node***这里面有这个node的js安装包3.Windows安装https://nodejs.org/zh-cn/download/安装完毕后打开cmd执行node -v就会显示版本这样则安装成功下面我们了解一下Nodejs是什么我们看一下官方说法作为异步事件驱动的JavaScript运行时

2021-05-31 13:44:14 290 1

原创前端常见的面试题

最近整理的几道常见的面试题1.px和em的区别？答:px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。2.BFC是什么?答:BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级

2021-05-24 19:07:03 129

原创判断是否是数组的方法

1.isArray（）是Array类型的一个静态方法，可以用于判断一个值是否为数组语法Array.isArray(obj)参数obj :需要检测的值。返回值如果值是 Array，则为true; 否则为false。举个例子 var a = [1,2,3]; console.log(typeof a); console.log(Array.isArray(a)); 输出结果如图所示:我们可以看到，通过typeof运算符输出数组的类型是Object ，

2021-05-24 13:33:22 7950 1

原创 JavaScript中怎样实现阻断执行

第一种：break可以打断for循环//找到10-100以内的第一个7的倍数for(var i = 10;i<100;i++){if(i % 7 ===0){ console.log(i) //这里我们可以写一个break打断for的循环不让他在进行循环 break}}下面我们看一下输出结果如图所示：第二种:return 他后面的代码不会再执行了function fn(){ return 123 console.log('这是后

2021-05-19 20:56:49 6082 2

原创 async和await

首先我们来了解一下async的作用:简化在函数返回值中对promise对象的创建，用于修饰函数放在函数声明的最前面被修饰的函数返回值一定是一个Promise对象async的简单使用1.函数声明形式写法，他会当一个关键字放入到函数最前面//astnc function fn(){ return "你好";}如何调用呢？async也是函数啊，所以他和普通函数调用是没有什么区别的，我们可以直接加括号就好。下面我们通过console.log运行一下 async function fn()

2021-05-19 20:10:10 127

原创 this指向的几种指向问题

1.在普通函数中的this指向谁？ function fn(){ console.log(this); } fn()输出结果如下图片:解析:在普通函数中this根据上下文来觉得，一般是指向windos的2.在构造函数中this回指向谁？function fn(a,b,c){ this.a=a; this.b=b; this.c=c; }

2021-05-17 20:56:48 185

原创异步加载的方法

1.可用用script标签的async=“async”的属性写法：<script scr="d1.js" async="async"></script>注意事项:是html5新增的属性，适用于谷歌浏览器，火狐，ie9支持（ie6-8都不支持）2.可用用script标签的defer=“defer”的属性写法:<script defer="defer"><script>注意事项：属性会对脚本延迟，知道页面都加载完成为止，适用于所有的浏览器，3.

2021-05-17 19:41:01 94

原创数组的解构赋值的使用方法注意事项

首先我们来了解一下什么叫解构赋值ES6允许使用按照一定的模式从数组或者对象中进行取值对变量进行赋值这个过程叫做解构赋值 //var变量的赋值 //var a = 1; // var b = 2; //var c = 3; //var a = 1, b = 2, c = 3; //let数组赋值解构 let [a, b, c] = [1, 2, 3]; consol

2021-05-17 19:04:59 340

原创 let和const的使用

标题简介首先我们先了解一下letlet 是ES6新增的声明变量的语法作用类似于vares6以前的是没有块级作用域的let声明的变量特点使用let声明的变量只在let所在的代码块起作用 (变量绑定)在同一代码块内(块级作用域) 使用let声明的变量可以重新赋值但是不能重新声明let声明的变量必须在声明之后才能使用(不存在变量提升)暂时性死区在全局作用域内使用let声明的变量但是不属于全局对象的属性1、使用let声明的变量只在let所在的代码块起作用 (变

2021-05-17 09:47:31 215

原创 ajax请求步骤和封装

简介首先带大家了解一下什么是ajaxajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。那么如何使用ajax呢？第一步创XMLHTTPRequest对象 var xhr = new XMLHttpRequest();第二步使用open方法设置和服务器的交互信息//get请求方式xhr.open('get','getStar.php);//post请求方式xhr.open('post','getStar.php);第三步发送请求xhr.sen

2021-05-05 21:56:38 261 1

原创 symbol类型

简介symbol是es6新增的第6中原始类型表示一个不可重复的值，不是函数，不能通过new调用一下我们用typeof来检测一下看一下他是什么类型let a = Symbol();console.log(typeof s) //"symbol"解析:以上代码中，这个let变量a就是一个毒医无二的值。typeof检测结果，这个变量a是Symbol数据类型，并不是字符串类型或其他的类型注意点上面说过sybol函数不能用new来调用，不然会报错啊下面我们看看看symbol函数是否可以接受字符串

2021-05-05 21:36:40 136 1

原创 window.onload和$(document).ready()的不同

1.首先他们的执行时机不同window.onload：一定会等到页面内容包括（图片，视频，元素等…）加载全部完毕后才执行。$(document).ready()是等DOM渲染树绘制完成后执行，他不用等到加载后执行。2.编写次数不同windows.onload:他不可写多个，要是写多个的话，他只会执行一个其他的会被覆盖掉这里我们可以看一下 window.onload = function(){ console.log("onload1"); }

2021-04-19 20:37:01 139

原创当图片缩小后失真和用固定定位时失效的解决方法

标题当图片失真时我们可以用1，background-size的cover的属性值介绍缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。2、background-position的属性值介绍background-position后可跟2个值，2个值用空格间隔开，第一个值，固定代表水平方

2021-04-19 20:03:52 875 1

原创实现video自定义功能

效果图片HTML代码 <div class="video_player"> <video src="res/birds.mp4"></video> <div class="menu"> <div class="play">播放</div> <div class="time">00:00/00:00</div> .

2021-04-05 21:00:54 591

原创构造函数和普通函数的区别

第一种匿名规则构造函数都应该以一个大写字母开头function Person（）{}非构造函数则以使用大驼峰首字母第一个大写开头function person(){}任何函数，只要通过 new 操作符来调用，那它就可以作为构造函数；任何函数，如果不通过 new 操作符来调用，那它跟普通函数也没有什么两样。demo://创建函数　　function Person(name,age){　　　　this.name = name;　　　　this.age = age;　　　　th

2021-03-07 16:07:09 204

原创学习js构造函数

构造函数创建方式当然首先的学一下匿名规则和注意事项1.构造函数的函数名使用大驼峰命名人为定义的2.构造函数内部，会自动创一个空对象，this执行这空对象，并且会自动返回这个对象3.构造函数中，如果出现return 如果是一个基本数据类型值，直接忽略，如果是引用类型，返回引用类型4.所有的对象，最终都是通过构造函数创建的第一种字面量创建对象var obj ={}第二种函数去创建一个对象function test(){return {b:1,b:2};}var a = test();

2021-03-07 15:52:45 202

原创 JS倒计时代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form name

2020-12-19 11:48:54 284 1

原创 Array数组的排序sort()方法

数组sort排序sort比较次数,sort用法，sort常用描述如果想按照别的顺序进行排序，就必须提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：如果根据你的评判标准，a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。如果a等于b，就返回0。如果a大于b，就返回一个大于0的值。1、对数字数组进行由小到大的顺序进行排序。代码如下:var arr = [22,12,3,43,56,47,4];ar

2020-12-12 11:51:14 2379

原创 DOM-添加元素、节点

createElement()方法能够根据参数指定的标签名称创建一个新元素，并返回新建元素的引用，用法如下var element=document.createElement(“tagName”);其中element表示新建元素的引用，createElement()是document对象的一个方法，该方法只有一个参数，用来指定创建元素的标签名称 <p id="attr" class="ff">我走过最远的前端路</p><ul></ul>&l

2020-12-12 11:24:05 302

原创 Chrome之js断点调试方法

方法/步骤1.Chrome开发者工具断点调试第一步:打开开发者工具，按F12或者在浏览器页面上右键选择经常第二步:在Source面板找到需要调试的文件第三步:设置断点第四步:触发调试部分程序的运行，开始调试调用过程常用的按钮及快捷键:跳到下一个断点:点击Sources面板右侧的 “三角按钮”快捷键： F8跳到下一步 : 点击Sources面板右侧的第二个按钮快捷键 : F10跳进断点处的方法中:点击Sources面板右侧第三个按钮快捷键 : F11跳进

2020-12-05 17:33:12 2236

原创 push()数组合并的方法

语法arr.push(element1, …, elementN)参数elementN解析:被添加到数组末尾的元素。返回值：当调用该方法时，返回新的length属性值push()方法可以将一个或者多个元素添加到数组末尾，并且返回数组的新长度（length）使用方法2.没使用push()之前var arr =['d1','d2','d3','d4'];console.log(arr);代码运行结果如下:2.1使用push()方法之后var arr =['d1',

2020-12-05 15:02:24 946

原创三元表达式的使用方法

1 三元表达式:表达式?结果1：结果2；如果表达式结果为true,执行结果1，如果表达式结果为false,执行结果2.可以理解为if else 的另外一种写法。例: var a = 10;　　a%2==0?alert("偶数"):alert("奇数");三元表达式也能做一些简单的条件选择，有三元运算符组成的式子成为三元表达式var num = 10; var result = num > 5 ? '是的' : '不是'; alert(result);

2020-11-30 13:13:31 7327

原创数据类型的使用

字符串值，数值，布尔值，数组，对象。JavaScript 数据类型JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：数据类型的概念JavaScript 从左向右计算表达式。不同的次序会产生不同的结果JavaScript 拥有动态类型JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：var x; // 现在 x 是 undefinedvar x = 7; // 现在 x 是数值var x = "B

2020-11-22 19:36:57 169

原创变量的定义和使用

变量的定义和使用什么是变量变量变量是存储数据信息的容器，用于保存数据。内存：存取速度快，数据容易丢失硬盘：存取速度慢，数据永久保存程序在运行中，仅和内存打交道变量名：内存空间的别名，可以自定义但凡需要自定义命名的位置，都叫做标识符变量值：保存在变量中的数据， [在内存中通过十六进制的方式进行唯一的地址存储]比如：x=2；y=3；z=x+y；这些字母就称为JavaScript的变量，变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。一、变量的命名规则变量可

2020-11-22 19:15:38 1144

原创选择器优先级的权值与计算

一.在HTML中常见选择器有：行内选择器、标签选择器、id选择器、类选择器（class）选择器权值标签选择器：权值为1类选择器和伪类：权值为10ID选择器：权值为100通配符选择器：权值为0行内样式：权值为1000当权值相同时，遵循就近原则。行内选择器：通过style将样式直接写在标签里面：格式为：style=“属性1:属性值1；属性2:属性值2；…”例如：<p style=”color: red;font-size: 32px;”>啊啊啊啊注意：最后一个属性值后面的分号

2020-11-16 23:17:26 152

原创 HTTP协议、TCP/IP协议

HTTP协议简介HTTP协议——超文本传输协议（Hyper Text Transfer Protocol）HTTP是Web的应用层协议，是Web的核心。他通过两部分程序实现：一个是称为浏览器的客户机程序和另一个称为Web服务器的服务器程序，他们运行在不同的端系统中，通过交换HTTP报文进行会话.HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP工作过程HTTP使用TCP作为它的支持运输协议。TCP为HTTP提供可靠的数据传输服务，意味着HTTP

2020-11-16 22:44:48 473

原创 ###盒子模型外边距内边距边框的使用

###盒子模型外边距内边距边框的使用首先了解一下盒子模型box：盒子，每个元素在页面都会形成一个矩形区域盒子盒子类型：1.行盒：通过display这个属性他的属性等于这个inline的元素中式英文：liline英乃ps：行和在页面中不换行浏览器默认样式设置行盒：span a img 。。。2.块盒：display等于block的元素ps：快盒子在页面中独占一行以前的说发叫inline-block 这种说法叫行类块盒子 ps：解释在一行能成块的盒子他的属性值

2020-11-15 23:11:46 280

原创 2020-11-09

html cssHTML css 一些基础标签HTML css 一些基础标签<img src="miages/1.jpg.jpg" alt="图片不显示图片" title="鼠标移入显示" ><a href="#news">新闻部分</a><a href="#por">产品部分</a><br><br><p id="news">具体的新闻</p><p id=por&gt

2020-11-09 18:22:13 636 1

Mr_box_的博客