自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(33)
  • 资源 (1)
  • 收藏
  • 关注

原创 ES6 symbol

Symbol为什么需要SymbolSymbol是什么为什么需要SymbolES5里面对象的属性名都是字符串,如果你需要使用一个别人提供的对象,你对这个对象有哪些属性也不是很清楚,但又想为这个对象新增一些属性,那么你新增的属性名就很可能和原来的属性名发送冲突,显然我们是不希望这种情况发生的。所以,我们需要确保每个属性名都是独一无二的,这样就可以防止属性名的冲突了。因此,ES6里就引入了Symbo...

2020-04-12 20:51:40 118

原创 Set 和 Map

Set 数据结构ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。数据结构是用来存储数据的(数组和对象都可以存储数据) var arr = [1,2,3];//数组里面可以存储任何的数据类型(存储数据的容器) var obj = { name:'huasheng',//对象里面也可以存储数据...

2020-03-26 17:28:24 110

原创 ES6中箭头函数的使用

箭头函数箭头函数的基本用法使用箭头函数注意事项箭头函数的 this不适用箭头函数的场合嵌套的箭头函数箭头函数的基本用法箭头函数是一个函数表达式,理论上,任何使用函数表达式的地方都可以改成箭头函数。//ES5 普通函数function 函数名(参数1,参数2...){ 函数体}//ES6 箭头函数(参数1,参数2...) => 函数体如果参数只有一个,可以省略小括号唯一...

2020-03-22 22:46:34 287

原创 JSON.parse() 与 JSON.stringify()用法

JSON.stringify()与JSON.parse()的区别JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串,而JSON.parse()是将JSON字符串转为一个对象。两者作用是相对的,可以用JSON.stringify()将对象a变成字符串c,也可以用JSON.parse()将字符串c还原成对象avar msg = {"message": ...

2020-03-15 13:14:27 289

原创 js时间线

开始绘制DOM树document.readyState = "loading"碰到外部的css的时候,DOM树继续绘制,就有其他的线路去下载此css文件script中src外部脚本如果没有async或defer,DOM树停止绘制,脚本下载完成执行后,继续绘制DOM树(同步)如果有async或defer,DOM树继续绘制,就有其他的线路去下载此js文img的src、iframe的...

2020-03-10 17:27:45 171

原创 JS模拟瀑布流无限加载

效果图:随着鼠标往下滚动,不断加载生成不同颜色 大小的图片HTML <div id="content"> <ul></ul> <ul></ul> <ul></ul> <ul></ul> </div>CSS * { ...

2020-01-09 20:50:51 380

原创 响应式布局和自适应布局&区别

1.什么是响应式布局和自适应布局响应式布局响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本。响应式开发的原理动态根据当前屏幕的宽度,自动改变页面中盒子的宽度、盒子的显示或隐藏。响应式开发的优缺点优点:对于不同设备只需要开发一套网页即...

2020-01-08 20:12:57 1233

原创 JS深度克隆

由于JS原始值和引用值的数据存储方式不一样(堆和栈),导致对引用值进行修改的时候会导致两个相同储存地址的引用值一起发生改变深度克隆方法: function clone(obj) { let result = obj instanceof Array ? [] : {} for (let key in obj) { ...

2020-01-07 20:18:32 134

原创 纯css制作旋转的立方体&跟随鼠标旋转

思路:首先有一个正方形,根据rotate translate属性设定好正方体六个面的位置然后用animation动画让正方体进行360°的旋转具体代码:.box { width: 200px; height: 200px; /* border: 1px dashed red; */ margin: 100px auto; position: relative;...

2020-01-05 21:41:26 417

原创 H5本地存储

H4中使用的cookie把用户信息保存在客户端浏览器,但是它受到很多限制。大小:最多能存储4k带宽:它是随着http请求一起发送到服务器的,因此浪费一部分的带宽复杂度:操作复杂H5新增加了一种在客户端本地存储数据的方法 webStorange,分两种形式sessionStorage和localStorage。使用键值对的方式进行存取数据,存取的数据只能是字符串。存储大小不超...

2019-12-30 18:38:18 563

原创 前端面试题

前端面试题

2019-12-24 20:21:49 221

原创 H5新增标签和属性

H5新增标签和属性

2019-12-23 08:36:11 131

原创 canvas实现淘宝放大镜效果

canvas放大镜效果

2019-12-23 08:35:33 162

原创 canvas时钟

canvas时钟

2019-12-15 22:28:44 75

原创 JavaScript-event事件

event事件:浏览器自动触发或者用户手动触发的页面状态的改变

2019-12-09 20:27:06 88

原创 JS中的 toString 和 valueOf 方法

所有的对象都继承了这两个方法,toString() 和 valueOf()

2019-12-07 10:25:58 257

原创 JS--Object题

题目: var a = {}; var b = { key: 'b' }; var c = { key: 'c' }; var d = [3, 5, 6]; a[b] = 123; a[c] = 345; a[d] = 333; console.log('a[b]=', a[b]); console.log('a[c]=', a[c]); console...

2019-12-02 20:01:59 286

原创 JavaScript案例

1.简易调色板2.全选按钮实现3.简易计算器4.随机点名器5.筋斗云导航

2019-12-02 16:26:24 197

原创 JavaScript--DOM

什么是DOM文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。DOM的分类核心DOM:提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。特点:万能但复杂且繁琐HTMLDOM:针对HTML文档,提...

2019-12-02 15:21:11 93

原创 数组和类数组

什么是类数组对象 (ArrayLike)拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)不具有数组所具有的方法JavaScript中常见的类数组arguments对象DOM方法返回结果(getElementsByTagName()、getElementsByClassName()…)判断一个对象是否为类数组...

2019-11-23 14:15:14 238

原创 数组方法及练习题

数组常用方法

2019-11-23 13:36:35 1198

原创 JavaScript闭包

什么是闭包?要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。JS中,在函数内部可以读取函数外部的变量function outer(){ var num = 10; return num;}outer();//10但在函数外部无法读取函数内部的局部变量function outer(){ var nu...

2019-11-12 21:02:35 101

原创 JavaScript预编译

JavaScript预编译事实上,JavaScript是一门解释性语言,不是编译语言,不存在编译,只是通常这样说。JavaScript预编译JavaScript引擎的三大步骤1,预编译(第一次扫描)扫描全部变量2,解释执行(第二次扫描)总结:JS运行过程全局预编译(脚本代码块script执行前)查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为...

2019-11-11 23:26:07 112

原创 CSS基础面试题(二)

1.display:none、visibility:hidden与opacity:0的区别?display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)opacity:0 占据空间(重绘)2.为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?浮动元素碰到包含它的边框或者浮动元...

2019-11-10 20:58:07 116

原创 前端基础练习题

一、组合问题:用1元纸币兑换1分,2分和5分的硬币,要求兑换总数为50枚,问可以有多少种组合,每种组合对应1分,2分,5分分别是多少?i代表1分,j代表2分,k代表5分function num(){var count = 0; //计数器 for(var i = 0;i <= 100;i++){ for( var j = 0;j <= 50;j++){ ...

2019-11-10 20:57:29 1498

原创 CSS基础面试题(一)

1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin2.box-sizing属性?用来控制元素的盒子模型的解析模式,默认为content-boxcontext-box:W...

2019-11-04 19:25:36 98

原创 JavaScript:数组的基础知识

一、什么是数组存储一堆变量,内存中连续存储多个数据的存储空间,再统一取名字(连续存储方便维护和查询)二、什么时候使用数组连续存储多个数据,必须使用数组三、如何使用数组1.创建空数组var arr = new Array();var arr = [];2.创建数组的同时,初始化数组内容var arr = new Array[1,2,true,"a"];var arr = [1,...

2019-11-02 14:25:26 151

原创 JavaScript--运算符

JavaScript运算符

2019-10-27 23:39:00 95

原创 JavaScript--数据类型

JavaScript中数据类型分为两种:1.基本数据类型2.引用数据类型一、基本数据类型1.string/字符串类型字符串(或文本字符串)是一串字符。字符串被引号包围。可使用单引号或双引号var str = "abc";var txt = 'hello world';2.number/数字类型var num = 6;3.boolean/布尔类型布尔值只有两个值:true ...

2019-10-27 21:20:06 620

原创 DIV+CSS布局

浮动一、 浮动有三个值:none(不浮动),left(左浮动),right(右浮动)二、

2019-10-21 00:26:43 65

原创 CSS控制图片和文字在同一行显示且对齐的3种方法

CSS控制图片和文字在同一行显示且对齐的3种方法在HTML代码中,我们有时候需要在图片后面加上简单的文字进行说明,但默认情况下,图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐。要想解决这个问题,常见方法有3种:1、通过添加css的 vertical-align:middle;2、如果图片是背景图片,可以在css中设置背景图片;3、把文字和图片分别放入不同的div中。...

2019-10-20 17:16:36 4160

原创 CSS

一、CSS简介CSS指层叠样式表 (Cascading Style Sheets) 用于渲染HTML元素标签的样式.CSS 可以通过以下方式添加到HTML中:1.内联样式 : 在HTML元素中使用"style" 属性<p style="color: red;font-weight: bold;">这是内联样式</p>2.内部样式表 : 在HTML文档头部区域使用...

2019-10-13 17:15:57 85

原创 HTML学习总结

HTML学习总结HTML( Hypertext Marked Language)

2019-10-11 18:44:24 91

HTML+CSS思维导图

作者整理的HTML+CSS思维导图,希望能够帮助到初学者,因为为思维导图,所以应有相关软件打开(xmind等)

2019-12-26

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除