- 博客(25)
- 收藏
- 关注
RSS订阅原创 利用canvas完成贪吃蛇游戏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { .
2021-04-18 22:58:59
282
原创 数字去重（5种方法）
<script> // 1：filter过滤，返回满足条件的值组成的数组。 let arr = [1, 2, 3, {}, null, {}, null]; let arr2 = []; arr2 = arr.filter(function(value) { return arr.hasOwnProperty(typeof value + value) ? false : arr[typeof value +
2021-04-11 22:10:48
1037
原创 canvas实现水果机游戏
这是html和js代码，需要导入jquery，和重置样式表。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FruitGame</title> <lin
2021-04-06 20:09:10
402
原创 事件委托
什么是事件委托？“事件委托”（又叫事件代理）即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。三个阶段1：捕获阶段。这个阶段不会触发任何事件。2：目标阶段。在目标节点上触发。3：冒泡阶段。从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。事件委托的优点。1：减少了注册事件，节约内存。
2021-03-28 23:34:16
115
原创 什么是闭包？
<body> <!-- 一个函数里面嵌套一个函数就是闭包，里面的函数可以访问外层函数的变量 --> <script> function out() { let arr = [1, 2, 3]; return function read() { return arr; } read(); }
2021-03-21 19:19:47
87
原创 数组的方法使用（一）
let arr = [1, 2, 3, 4, 5]; // 1：Array.map 映射一一对应 // let newArr = arr.map(value => value * 2); // let newArr = arr.map(function(value, index, array) { // return value * 2; // }); // 2：Array.forEach 遍
2021-03-20 14:57:39
87
原创 数组的解构赋值
<script> // 以前的写法.为变量赋值，只能直接指定值 let a = 1; let b = 2; let c = 3; // ES6的允许写法 let [a, b, c] = [1, 2, 3]; //从数组中提取值，按照对应位置，对变量赋值 console.log(a, b, c); //1,2,3 // 本质上，这种写法属于“模式匹配”，只要等号两边的模
2021-03-09 20:12:13
113
原创 ES6初体验之let与const
<script> // 1：let命令，用来声明变量。let声明的变量不会挂在window中，不会造成全局变量的污染 // 2:新增了一个块级作用域{}，以前只有函数作用域，全局作用域 for (let i = 0; i < 5; i++) { console.log(i); //0.1.2.3.4 } console.log(i); // i is not defined
2021-03-09 19:33:44
80
原创 前端网页优化方案
合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）Nginx开启Gzip，进一步压缩资源（减小资源大小）图片资源使用CDN加速（提高加载速度）符合条件的图标做base64处理（减小资源大小）样式表放首部，JS放尾部（JS单线程，会阻塞页面；资源加载方式）设置缓存（强缓存和协商缓存，提高加载速度）link或者src添加rel属性，设置prefetch或preload可预加载资源。（加载时机）如果使用了UI组件库，采用按需加载（减小资源大小）SPA项目，通过impo.
2021-01-10 22:15:09
149
原创 随机生成一个四位数的验证码
<!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> <script>
2020-12-26 13:31:37
852
原创 获取鼠标在屏幕坐标时的兼容性问题处理
在做一些与鼠标相关的效果时，经常要获取鼠标在浏览器上面的坐标。而不同的浏览器的兼容性是不一样的，这次向大家介绍如何解决这个问题。获取坐标的步骤：第一步：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2020-12-26 11:13:05
179
原创 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> <style> *{ mar
2020-12-20 19:34:53
105
原创 封装思想的运用
为什么要封装？在我们写程序的过程中，要取各种名字，一旦代码量多了之后，很内容出现命名重复的问题，特别是调用函数。所有我们要对函数进行封装，尽可能避免出现重复命名的问题。创建一个对象，将函数封装在里面。var Mytools = { /** * 实现元素的移动 * @param {*} ele 需要移动的元素id * @param {number} target 移动的距离 */ animate : function(ele, target){
2020-12-20 19:30:23
133
原创 利用js动态创建页面
数据的增，删，改，查是任何一门语音都必须熟练掌握的。在js中，创建元素的关键字是document.createElement（string）。string是需要创建的标签名。要求：创建一个学生成绩的表，并可以完成删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
2020-12-12 16:17:17
2377
2
原创 DOM的基础使用
首先要了解一些必要的定义。DOM-文档对象模型，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。文档：一个网页可以称为文档。节点：网页中的所有内容都是节点（标签、属性、文本、注释等）。元素：网页中的标签。属性：标签的属性。想要js与html联系起来，首先我们要获取到元素（有很多方法），然后对元素进行操作（设置其属性或调用其方法）。比如动态创建元素，事件(什么时机做相应的操作)。因为id名具有唯一性，一般情况通过id来获取元素。举例来说明<div id=
2020-12-12 15:00:39
574
原创 循环的基本使用
循环结构是算法结构中的一种基本使用方法。是解决重复执行某一动作的方法。循环有三种结构，其中最常用的是for循环。第一种：while循环while(表达式){ 循环体} //先判断表达式的值是否为真，为真则执行循环体。否则不执行。第二种：do{ 循环体}while(表达式) //先执行循环体，然后进行判断，为真则继续，否则跳出循环。第三种：forfor(表达式1;表达式2;表达式3){ 循环体} //表达式1初始化对象;表达式2判断条件;表达式3条件改变表达式
2020-12-05 16:58:07
1927
原创 去除数组重复值的基本方法？
在笔试中很大概率会出现的一类题，去除数组里面的重复值。方法有很多，本人整理了3种最基本的方法。1：利用双循环完成/** * @returns 返回一个新的数组 * @param {Array} arr 接收一个数组 */function method1(arr){ var newarr = []; //创建一个数组用来存储 for(var i = 0; i < arr.length; i++){ //遍历我们传入的数组，得到其中的数据 var i
2020-12-05 10:40:10
1144
原创 带你了解javascript的常用数据类型
学习一门语言，首先要了解这门语言的基础。在js中，基本数据类型有五种，分别是：1：数字类型（number），可以表示32位（4个字节）的整数，也可以表示64位（8位）的小数（浮点数）。补充点：数字类型可以加上前缀，来表示不同的进制0 : 表示 8 进制0x : 表示 16进制0b : 表示2进制2：字符串（string）由Unicode字符（在计算机中每个字符占两位）、数字、标点符号组成。书写方法有：单引号 ‘’，双引号 “”，叫做模板字符串`。3：布尔类型（boolean），用来表
2020-11-29 15:53:32
180
原创 position的常用属性值有哪些？
CSS中给我们提供的另一种定位方法——position。又可以分为自动定位（static），相对定位（relative），绝对定位（absolute），和固定定位（fixed）。自动定位：元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。相对定位：相对原本的位置进行偏移，在不改变页面布局的情况下。会占据原有的空间。绝对定位：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 stati
2020-11-29 15:17:12
1149
4
原创 如何清除浮动？
一：我们在使用浮动时，不可避免的会遇到高度塌陷的问题。因为常规流盒子在计算高度时，不考虑浮动盒子。举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2020-11-20 18:45:15
202
原创 浮动的使用办法
一：为什么要使用浮动？为了解决文字环绕问题。解决横向排列问题。二：浮动的基本特征:float: left; (左浮动，元素靠上靠左)float: right; (右浮动，元素靠上靠右)默认值为：none特点：当一个元素经过浮动后，元素必定变为快盒。浮动元素的包含快为父容器的内容盒。三：浮动盒子尺寸宽度或者高度为auto时，适应内容宽度或者高度。margin为auto时，等同于0。边框，内边距等于常规流布局。举例：<!DOCTYPE html><html
2020-11-20 18:22:08
950
原创 深入了解盒子模型
不管是行盒还是快盒，具体由以下几个结构组成。1:内容盒（content-box）主要设置宽，高。2:内边距(padding)，还有一种说法是填充padding-toppadding-rightpadding-bottompadding-left简写：padding。顺序是顺时针（上右下左）内容到盒子边框的距离。这里我们举例说明：同样在页面上画个盒子，内容写上“盒子”，div{width: 100px;height: 100px;background-color: blue;}
2020-11-15 17:42:19
279
原创 带你初步了解盒子模型
首先弄清楚什么是盒子模型？很多初学者认为盒子模型就是div，span，其实这种说法是不完全正确的。实际上任何元素在页面上都会形成一个矩形区域，这也就是我们所说的盒子模型。只不过我们接触和使用最多的模型是div和span。其它如h1，p，a标签实际上都是盒子模型。虽然都是盒子模型，但是也存在一些差别。我们通常将盒子模型分3种:1:行盒行盒的特征是display元素的属性值为inline，在页面中显示的时候是不独立成行的。我们常用的span，a ，img等都是行盒。2:块盒块盒的特征是displa
2020-11-15 16:37:31
422
原创 带你了解css的使用
什么是css？CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我习惯叫作“层叠样式表”。为什么要使用css？我们通过html来描绘文本内容，但是仅仅在网页上面显示而已。自己一个人看看无所谓，但是一般来说是给用户看的，所以需要对页面进行美化。好比每个人都需要打扮一样。 怎样使用css？css的使用方法有3种。1：内联样式，又叫做行内样式。直接写在style元素的属性中。2：内部样式，一般来说写在head标签中，也是通过style元素。（写在别的地方可以，
2020-11-08 18:52:00
737
1
原创 对html的认知
学习一门知识，首先要了解关于它的历史发展。HTML1.0实际上没有所谓的html1.0，是1993年IETF（互联网工作任务组）团队的一个工作草案,并不是成型的标准。HTML2.01995年11月作为RCF1866发布，于2000年6月RFC2854发布之后宣布过时。HTML3.21996年W3C撰写新规范，并于1997年1月推出HTML3.2。HTML4.0与HTML4.0.1：1997年12月18日成为W3C的推荐标准。1999年12月24日成为W3C的推荐标准。其中只做了细微的
2020-11-08 18:51:28
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人