web
关注
分享
扫一扫
lishundi
做一个热爱前端的菇凉，冲鸭！！！
展开
-
七牛云面试
Vue中的懒加载方式一：Vue工厂函数异步解析组件，Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供将来重新渲染使用。Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 reso...原创 2019-10-14 22:19:45 · 517 阅读 · 0 评论 -
CSS如何画扇形
效果图如下：用border + 宽高为0可以画正方形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-10-11 23:23:32 · 1693 阅读 · 0 评论 -
React V7版本一些新的生命周期函数
Mount阶段：constructor()static getDerivedStateFromPro ps()：返回一个对象来更新 state，如果返回 null 则不更新任何内容。(componentWillMount() / UNSAFE_componentWillMount()//被废弃)render()componentDidMount()Update阶段：...原创 2019-10-11 22:21:52 · 158 阅读 · 0 评论 -
浮动
float:left 先向左浮动，后向上浮动(right一样的道理)１．如果浮动元素的上一个兄弟元素是正常元素，则浮动元素跑不上去<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动</title> ...原创 2019-09-10 09:34:57 · 143 阅读 · 0 评论 -
块级元素、行内元素、行内块级元素的特点
1.块级元素：(1)独自占据一行,故默认宽度是容器的100%。(2)可以设置宽、高、行高、内外边距。(3)可以容纳行内元素和其他块级元素。注：文字类的块级元素不能容纳块级元素，例如<p>/<h1>~<h6>/<dt>2.行内元素：(1)会和相邻的行内元素排成一行。(2)设置宽、高无效，默认宽高是其自身内容的宽高。(3)...原创 2019-07-25 14:39:06 · 5155 阅读 · 0 评论 -
CSS中元素居中的方式总结
一：水平居中（margin:0 auto;）推荐使用<!DOCTYPE HTML><html><head> <style> *{ margin: 0; padding: 0; } .box{ width: 400p...转载 2019-03-06 16:11:37 · 276 阅读 · 0 评论 -
扩展运算符的应用
扩展运算符是三个点（...），主要用于展开数组，将一个数组转为参数序列。下面是扩展运算符的应用情况;1. 代替数组的apply方法：求数组最大元素问题：（１）用es5中的apply方法将数组转为参数序列，然后用Math.max()求数组中的最大元素：function f(x,y,z){ console.log(Math.max(x,y,z));}var args =...原创 2019-02-18 21:59:10 · 462 阅读 · 0 评论 -
JS中的事件处理程序
什么是事件和事件处理程序？事件就是用户或浏览器执行的某些动作，诸如click，load，mouseover等，都是事件的名字，而响应某个事件的函数就是事件处理程序，事件处理程序的名字是在事件的名字前面加上“on”。例如：onclick是click事件的事件处理程序，onload是load事件的事件处理程序。总共有4种事件处理程序，介绍如下：HTML事件处理程序：写法一：<inp...原创 2019-02-11 16:11:52 · 590 阅读 · 0 评论 -
JS中的this的指向
JS中的this的指向是个令人头疼的问题，看了好多博客，自己总结一下大家也看一下：什么是this?this是JavaScript语言的一个关键字，它是函数运行时自动生成的一个内部对象，只能在函数内部调用最重要的一句话：this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁最终调用函数，this就指向谁。情况一：所有在全局作用域中定义的变量和函数都是window对象的属...原创 2019-01-26 18:10:52 · 227 阅读 · 0 评论 -
let命令的应用
先来看个例子：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test</title></head><body><ul id="hd"原创 2018-12-11 17:54:44 · 308 阅读 · 0 评论 -
JS创建对象__高级
虽然用Object构造函数或对象字面量可以创建单个对象，但有一个明显的缺点：使用同一个接口创建对象，会产生大量重复的代码。为此红宝书中又有三种基本的创建对象的方式：（１）工厂模式function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.j...原创 2018-12-09 17:15:54 · 150 阅读 · 0 评论 -
js中map方法和forEach方法的区别
红宝书中的定义：map():对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。forEach():对数组的每一项运行给定函数，无返回值。forEach()代码如下：let arr = ['kebe','liyabin','wangmin'];arr.forEach((item,index,array)=>{ console.log( item); ...原创 2018-11-18 14:00:39 · 1205 阅读 · 1 评论 -
webpack相关总结
webpack相关总结1. 什么是webpack?它和grunt和gulp有什么不同？Webpack是一个模块打包器，它可以递归的打包项目中的所有模块，最终生成几个打包后的文件。它和其它的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJS)、全局分析。2. 什么是bundle？什么是chunk？什么是module?bundle是由webpack打...原创 2019-09-19 13:59:24 · 175 阅读 · 0 评论 -
伪类与伪元素
伪类，更多的定义的是状态。常见的伪类有 :link、:visited、 :hover、 :active、 :not、:first-child、:last-child、:required、:valid、:invalid等等。伪元素，不存在于DOM树中的虚拟元素，它可以像正常的html元素一样定义css，但无法使用JavaScript获取。常见伪元素有 ::after、::before、::fir...原创 2019-09-10 00:16:19 · 671 阅读 · 0 评论 -
龙渊科技电话面试
async…await 结合 Promise使用如何捕获错误金山打字游戏的逻辑（见红宝书）用过哪些babelbabel的原理babylon 将 ES6/ES7 代码解析成 AST@babel/traverse 对 AST 进行遍历转译，得到新的 AST新 AST 通过@babel/generator 转换成 ES5ant-design中的UI插件：DVAnode.js中间件的原理...原创 2019-10-10 21:09:27 · 239 阅读 · 0 评论 -
Cookie补充的一些知识
Cookie的有效期Cookie的maxAge决定着Cookie的有效期，单位为（Second）。Cookie中通过getMaxAge()与setMaxAge(int maxAge)读写maxAge属性。如果maxAge属性为正数，则表示该Cookie会在maxAge秒之后自动失效。浏览器会将maxAge为正数的 Cookie持久化，即写到对应的Cookie文件中。无论客户关闭了浏览...原创 2019-10-04 20:43:48 · 871 阅读 · 0 评论 -
字节跳动面试
一面：线程和进程的区别进程是资源分配的基本单位，也是调度运行的基本单位。线程是进程中的每一个执行单元，当一个java程序启动时，就会产生一个进程，该进程会默认创建一个线程，称为主线程。单线程进程的执行过程在宏观上是线性的，在微观上也只有单一的执行过程，而多线程进程的执行过程在宏观上是线性的，在微观上却有多个执行过程。进程有自己的地址空间，而线程没有自己的地址空间，共享它所属进程的资源。...原创 2019-10-04 18:00:28 · 770 阅读 · 0 评论 -
老虎面试
1.http1.0和http2.0 的区别http1.0利用文本与服务器进行交互，而http2.0的基本协议单位是二进制帧http2.0只建立一次连接，即一轮三次握手，实现多路复用。http2.0会压缩消息头http2.0支持服务器推送数据的功能2.代码题let { a: b, c: d } = { a: 1, b: 2, c: 3, d: 4};console.log(a +...原创 2019-10-04 13:35:42 · 387 阅读 · 0 评论 -
手动实现call、apply、bind
call的实现：思路很简单：1、将函数设置为对象的属性：obj.fn = func 2、执行函数：obj.fn() 3、删除函数：delete obj.fn注意的地方：4、this 参数可以传null或者undefined，此时 this 指向 window 5、this 参数可以传基本类型数据，原生的 call 会自动用 Object() 转换 6、函数是可以有返回值...转载 2019-09-29 22:02:50 · 515 阅读 · 0 评论 -
Websocket协议
（1）websocket是HTML5的一个新协议，它支持服务端向客户端传递信息，实现浏览器和服务器之间的双工通信。（2）websocket相对与HTTP协议来说是一个持久化的协议。HTTP获取数据的时候，需要不断的问服务器是否有我要的数据？如果有数据就返回数据，没有就过一段时间再次询问服务器否有我需要的数据。而websocket 呢，它只建立一次连接，那么这个连接就不会断，服务器端如果有数据的...原创 2019-09-24 14:42:32 · 128 阅读 · 0 评论 -
作业帮笔试
一：单行输入:1 1(输入是"1 1")2while(line = relinesadline()){ var lines = line.split(" "); var a = parseInt(lines[0]); var b = parseInt(lines[1]); print(a + b);}二：多行输入:（例子未定）var n = par...原创 2019-09-19 13:49:48 · 637 阅读 · 0 评论 -
href和src
href: 指定网络资源的位置,目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。src: source（缩写），为了引用资源，指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。区别：1 请求资源类型不同（1）href 指向网络资源的位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。（2）src 是将外部资源下载并解析到页面，比如 J...原创 2019-09-10 00:52:10 · 663 阅读 · 0 评论 -
JS 中的两种定时器
setInterval(cb, ms) setInterval(cb, ms) 全局函数在指定的毫秒(ms)数后执行指定函数(cb)。返回一个代表定时器的句柄值。可以使用 clearInterval() 函数来清除定时器。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。function printHello(){ ...原创 2018-10-20 21:10:04 · 1424 阅读 · 0 评论 -
AJAX请求JSON数据
什么是AJAX?AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google ...转载 2018-08-18 18:11:10 · 371 阅读 · 0 评论 -
offsetTop()和scrollTop()的用法以及与之相关其他方法
(1)offsetLeft()和offsetTop() :动态计算标签的距离在页面任一元素的offsetLeft或offsetTop总是跟距离自己最近的有position属性的元素定位，取其left值和top值。如果没有，就根据根节点body定位，然后获取其left值或top值。无position属性的情况：<!DOCTYPE html><html><...原创 2018-08-10 11:26:26 · 5738 阅读 · 0 评论 -
一维数组，二维数组的创建与遍历
一维数组的遍历：注意：函数是一个封闭的环境，函数里面的变量不会调用外部的数据，外部的数据也不会调用里面的局部变量．<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>try</title>原创 2018-07-27 18:52:16 · 1089 阅读 · 0 评论 -
自定义行列数的隔行变色表格效果
这种效果用处不大，但是可以作为练习双层for循环和document.write()的工具．思路如下：把<table></table>,<tr></tr>,<td></td>用document.write()输出，把行数和列数用prompt()输入框进行输入，提高灵活性．<!DOCTYPE html>原创 2018-07-27 17:46:54 · 584 阅读 · 0 评论 -
通过DOM关系获取元素节点和操作节点的基本方法
５大节点：HTML文档中的每个成分都是一个节点．（１）整个文档是一个文档节点（２）每个HTML标签是一个标签节点（３）包含在HTML标签中的文本是文本节点（４）每个HTML属性是一个属性节点（５）注释属于注释节点注意：换行和空格都属于节点，称为＂空白节点＂．DOM树：HTML文档中的所有节点组成了一个文档树模型，HTML文档中的每个标签，属性，文本等都是树中的一...原创 2018-08-04 18:37:22 · 1267 阅读 · 0 评论 -
JS实现抽奖效果
这种效果很常见，所以对我们前段开发者来说是基本功，必须掌握．页面布局：实现思路如图：(一条流水线的思路)代码也很简单啦ＨＴＭＬ部分：<body><div id="box"><input type="button" value="开始抽奖" id="start"><input type="原创 2018-08-04 11:31:17 · 9203 阅读 · 0 评论 -
导航栏切换效果
在网页中经常会遇到导航栏切换效果，也就是鼠标放到某一导航栏上，底下对应的内容就会发生变化．下面说一下实现思路：首先说下this的用法：this在事件中指向的是事件源对象，来看下面这段代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2018-08-04 10:25:28 · 4092 阅读 · 0 评论 -
原生JS实现打字游戏
第一步：页面的排版和布局1.1实现开始游戏的界面 1.1.1开始游戏 1.1.2游戏说明 <!--游戏开始的界面--> <div id="gameStart"> <div id="start">开始</div> <div id="describe"&原创 2018-07-27 09:33:36 · 2036 阅读 · 0 评论 -
JS实现直角三角形，倒直角三角形，九九乘法表，金字塔效果
直角三角形的实现：这种比较简单，是对js的基本练习，就一个很常规的双层for循环<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>try</title> <s原创 2018-07-27 09:27:58 · 8663 阅读 · 0 评论 -
Js基本的三种输出工具
先来介绍一下常用的三种输出工具：１．alert():弹框注意事项：在JS中单双引号本无区别，但是如果遇到双层引号的问题，则需单引号包双引号，双引号包单引号（英文）．如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&a原创 2018-07-27 08:37:15 · 530 阅读 · 0 评论 -
es6箭头函数以及this的指向问题
es3，es5中的构造函数与es6中的箭头函数区别：es3 es5中的函数的写法：function (){}es6中的箭头函数的写法：()=>{}注意：如果参数只有一个，并且函数体内直接将参数作为返回值，则可以省略()和{}。 { var array = [1,2,3,4,5]; var adds = array.map(function (...转载 2018-08-14 10:14:35 · 1961 阅读 · 0 评论 -
JS创建对象
JS创建对象的方法有两种：１．通过原生形式创建对象(对象字面量表示法) var iphone9 = { color: 'yellow', price: '8000 dollers', size: '5.5ch', weight: '200g', chat: functi...原创 2018-08-01 20:14:28 · 203 阅读 · 0 评论 -
鼠标事件 事件对象
事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘操作产生的event中会包含与按下的键有关的信息。（1）clientX() 当前鼠标事件发生时鼠标和可视区域左侧的距离(2)clientY() 当前鼠标事件发生时鼠标和可视区域顶部的距离(3)offsetX...原创 2018-08-10 20:29:46 · 576 阅读 · 0 评论 -
ES6中的let和js中的var的比较
let和var的比较：（1）块级作用域let实际上为 JavaScript 新增了块级作用域。function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5}上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用va...转载 2018-08-13 17:00:42 · 480 阅读 · 0 评论 -
Jquery选择器3
这节主要介绍child与of-type的区别：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Jquery选择器3</title></head><转载 2018-08-15 17:53:38 · 196 阅读 · 0 评论 -
Jquery选择器2
主要介绍带有属性的选择器的用法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Jquery选择器1</title></head><script转载 2018-08-15 16:11:16 · 135 阅读 · 0 评论 -
Jquery选择器1
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。具体方法见下面代码，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Jquery选择器1</ti转载 2018-08-15 12:05:27 · 159 阅读 · 0 评论