joyouscola-CSDN博客

原创懒加载与预加载的区别

懒加载：延迟加载图片，达到加载条件时再加载。原理：img的src属性初始不放置实际需要的链接，而是存在data-url属性中，达到某条件后再动态充值src属性值为data-url里的链接地址，实现懒加载。作用：减轻服务器压力，节约流量，页面加载速度快。预加载：提前加载图片，当用户需要查看时是直接从浏览器缓存里取的资源，用户操作体验速度快。原理：在浏览器加载页面时创建image对象并赋值src链接作用：让用户有快速的冲浪体验。缺点：增加服务器压力，首页加载渲染时间长。区别：懒加载与预加载都

2021-06-03 20:25:28 2730

原创实现继承的几种方法

1、继承第一种方式：对象冒充function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); }}function Child(username,password){ //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承 //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象， /

2021-05-31 22:01:25 3026

原创 ES6中的symbol的理解

symbol是什么symbol 是一种基本数据类型（primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。使用方法Symbol的使用方法

2021-05-31 00:00:23 308

原创 cookie、localStorage和sessionStorage的区别

首先介绍一下它们SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于WebStorage，创建它们的目的便于客户端存储数据。而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。Cookie是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。可以它用来确定两次请求是否来自于同一个浏览器，从而能够确认和保持用户的登录

2021-05-24 00:20:30 877

原创 module.exports和exports的一些理解

1、nodeJS采用commonJs规范，当前文件是一个模块(module)私有域，通过exports属性导出，通过require()引入模块，通过.xx去获取值，从而了解到加载某个模块，其实是加载该模块的exports属性。2、exports是module.exports的别名，不要在同一个文件内同时使用两个，否则只能获取到module.exports的值.简单来说如下：exports = module.exports = {};modulemodule是一个对象 {Object}consol

2021-05-23 22:12:46 2869

原创清除浮动的多种方法

为什么要清除浮动？为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.设置一个大的div，里面装两个小的div ，一般情况是子级的div撑起父级div的高度，所以呈现以下的样子如果说想要将里面两个小的div并排放的时候，则需要将两个div添加属性 float : left 结果是这样的两个小的div并排了，但是父级的div的高度则没有了，这就是子级浮动造成的影响。清除浮动的常用方法①结尾处加空div标签 clear：both (不推荐使用：如果页面浮动布局多

2021-05-17 20:40:11 103

原创 apply，call，bind三者的区别

apply方法apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入，且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变thi指向一次。var name="martin";var obj={ name:"lucy", say:function(year,place){ console.log(this.name+" is "+year+" bo

2021-05-16 23:54:16 234

原创 AJAX工作原理及其优缺点

1、什么是AJAX？AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。使用XHTML+CSS来标准化呈现；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据通信；使用Javascript操作Document Object Model进行动态显示及交互；使用JavaScript绑定和处理所有数据。这些能提供富用户体验。完全的 AJAX

2021-05-11 20:11:01 601

原创 ES6解构赋值

什么叫解构赋值？ES6允许使用按照一定的模式从数组或者对象中进行取值对变量进行赋值这个过程叫做解构赋值。1、数组类型解构let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 结构分为4类①完全结构let [x, [y, z]] = [1, [2,[3]]];console.log(x);//1console.log(y);//2console.log(z);//[3]② 不完全解构的情况下

2021-05-10 20:57:55 524

原创 var和let、const的区别

1、在window上的区别var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); // 1 undefinedvar可以挂载在window上，但let和const则不会挂载在window上面。 2、变量提升的区别console.log(a); // undefine

2021-05-06 00:15:28 97

原创深克隆与浅克隆的区别

浅克隆浅克隆是指在克隆对象时，对于基本数据类型的变量会重新复制一份，而对于引用类型的变量只是对引用进行克隆。就是将栈中的值复制一份给新的变量，但是两个对象指向都是同一个地址，一个发生改变另外一个也发生改变。看一下上面的例子，定义了一个arr数组，再将arr的值赋值给Arr，输出Arr，得出的值是arr的值，再通过Arr使用数组的方法添加进了一个数字，结果arr和Arr两个都输出是同一个数组。简单的来说，也就是定义一个Array数组名字叫arr，然后将arr的值复制一份给Arr，这里Arr和arr两个

2021-04-26 00:43:53 2813

原创 JavaScript的防抖节流

函数防抖：是指一定时间内方法只跑一次。函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次两者都是优化高频率执行js代码的一种手段。防抖debounce代码：// 函数防抖var timer = false;document.getElementById("debounce").onscroll = function(){ clearTimeout(timer); // 清除未执行的代码，重置回初始化状态 timer = setTimeout(function(){ cons

2021-04-06 23:02:36 66

原创用canvas实现雨滴效果

先看效果看起来很炫酷，其实就是实现了雨滴ide掉落还有最后的圆还是看源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>

2021-04-06 00:40:28 454

原创用JS实现飞机大战小游戏

小的时候玩的飞机大战感觉还蛮神奇，今天自己就学着做了一个先制作好要做好的几步以及背景样式var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running = 2; // 游戏阶段

2021-04-06 00:20:39 1055

原创 JavaScript闭包的理解

1、什么是闭包和闭包的几种写法和用法闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：①作为一个函数变量的一个引用，当函数返回时，其处于激活状态。②一个闭包就是当一个函数返回时，一个没有释放资源的栈区。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在

2021-04-06 00:03:15 97

原创 canvas实现动态时钟

HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“ ”低性能为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢

2021-04-01 21:43:16 428

原创 JS的作用域与作用域链

作用域链作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。作用域链的前端始终是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象在最开始时只包含一个变量，即arguments对象。作用域链的下一个变量对象来自包含环境，而在下一个变量对象则来自下一个包含环境。这样一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。某个执行环境中所有的代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数

2021-03-14 23:58:35 130

原创 JavaScript中this关键字的总结

this 关键字this无法进行赋值面向对象语言中 this 表示当前对象的一个引用。关键词指的是它所属的对象。在方法中，this 表示该方法所属的对象。单独使用，this 表示全局对象。在函数中，this 指的是全局对象。在函数中，在严格模式下，this 是未定义的(undefined)。在事件中，this 指的是接收事件的元素。方法中的 this在对象方法中， this 指向调用它所在方法的对象。例如：var str = { name: "JavaScript", age

2021-03-07 23:08:26 99

原创 JS数组的总结

什么是数组?数组对象是使用单独的变量名来存储一系列的值。是一种特殊的变量，它能够一次存放一个以上的值。接下来是创建数组，数组的创建有三种：①常规方式var arr=new Array();//接下来是王数组里面添加arr[0] = 1;arr[1] = 2;arr[2] = 3;②简洁方式var arr=new Array("1","2","3");③字面量创建var arr = ["1","2","3"];访问数组通过指定数组名以及索引号码，你可以访问某个特定的元素。/

2021-03-07 22:17:58 116

原创 canvas 实现代码雨

先看效果图这个效果图是不是像极了以前电影里面的黑客技术，看起来蛮难的，其实操作起来还是挺简单的。canvas其实就是画布的意思首先我们得有一个画布<body> <canvas id="canvas"></canvas></body>再设这样一个背景HTML部分<body> <canvas id="canvas"></canvas> <div></div>&

2021-01-25 20:55:55 626

原创用函数求出两个数的最大公约数，最小公倍数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。首先JS是写在script 里面<script></script>函数就是包裹在花括号中的代码块，前面使用了关键词 function：<script>function show(a,b){ //执行代码;}</script>当调用该函数时，会执行函数内的代码。在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,.

2021-01-22 00:27:02 1871

原创 js---用*打印三角形，正方形，长方形，菱形

用js打印这些图形，其实就是循环的嵌套1、用*打印一个10x10正方形；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></h

2021-01-18 21:02:32 3305

原创三分钟学会JS中的for、while、do while，并且区分

在JS中，我们基础的循环就是while循环、do-while循环、for循环；循环之前，首先我们得知道循环结构的执行步骤：①声明循环变量；②判断循环条件；③执行循环体操作；④更新循环变量；⑤然后循环执行执行②-④，直到条件不成立，跳出循环。1、while循环会在指定条件为真时循环执行代码块。while(条件){ 需要执行的代码}例如：var num = 1;//1、声明循环变量 while (num<=10){//2、判断循环条件; docu

2021-01-15 23:38:26 315

原创纯CSS3实现3d星空魔方旋转动画特效

项目效果实现原理先给一个星空背景，再创建一个大的div ，里面在创建6个小的div也就是六个面，再给他们一个position: absolute使他们重叠在一起，再给一个transform: translateZ(px)（最佳给的是宽高的一半），剩余的再给一个动画旋转，下面有代码来分步来说1、先做出背景图和一个有3d效果的方块图HTML部分<body><div class="father"> <div class="son1"></di

2021-01-03 19:44:20 1444

原创用CSS3实现水波动画

先看效果图这个看上去就是一个百事可乐的一个logo，看上去挺难的，其实做起来蛮简单的，就是一个大的div里面套着两个div<body> <div id="box"> <div id="son1"></div> <div id="son2"></div> </div></body>1、先制作一个蓝色的背景的盒子#box{ widt

2020-12-29 22:53:28 815

原创 CSS3实现3d效果照片墙

项目效果实现原理首先给他一个div盒子，然后在里面给他装8个div装img，给装img的div一个position:absolute,使所有的照片都叠在一起，然后给个transform:translatesZ(px)使图片在对应的角度移动出来，再给每个装img的div一个transform:rotateY(deg)给45deg、90deg、135deg、180deg、225deg、270deg、315deg、360deg，不同的位置给出不同的角度使图片展现出上图的位置HTML<!DOCTY

2020-12-26 16:54:02 2274 5

原创 CSS3------实现创意按钮动画效果

效果展示第一眼看上去很炫酷，感觉很难，其实很简单如果有需要，请看我接下来的操作1、首先我们做一个最基本的接下来我们就设置这个按钮的透明度，使其产生视觉色差再给边框加一个关键帧动画后面直接给四个边框都给它加上，然后使用关键帧动画，代码图和效果图如下后面再加一个overflow ：hidden 进行溢出隐藏最后的效果图这样来说是不是很简单，如有错误请各位大佬指导一下...

2020-12-21 20:38:55 491 1

原创一天学会CSS3动画效果

css的动画效果主要分为三类①transition②transform③animationtransition①transition-propertty:设置对象中的参与过渡的属性属性值是：all:所有可以进行过渡的css属性none：不指定过渡的css属性property：指定要进行过渡的css属性有过渡效果的属性：②transition-duration：设置对象过渡的持续时间，主要以S为单位③transition-timing-function：设置对

2020-12-19 13:17:15 3987 5

原创两天学会CSS（第二天）

css选择器①通配符选择器：*{}尽量避免使用通配选择器，因为会给所有的标签添加样式②标签选择器：直接用标签名div{}③类选择器：又称class选择器用.name{}完成*注1.class选择器是可以复用的2.可以添加多个class样式3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序④ID选择器：用#name{}⑤群主选择器：使用，分隔⑥后代选择器：使用空格进行分割分隔⑦子代选择器：使用>进行分隔⑧属性选择器：使用[属性名=“属性值”]⑨伪

2020-12-14 23:48:50 137

原创两天学会CSS（第一天）

简述CSScss简单来说就是层叠样式表分为3种样式：①行内样式（直接在行内加一个style属性）②内部样式（在head里面添加一个style标签）③外部样式（在外部创建一个后缀为css的文件，之后再用link连接起来）css里面有常用的几种样式1、颜色表示法①直接用单词表示法②十六进制表示法③rgb三原色表示法（取值范围是0~255）④rgba 其中a是透明度（取值在0~1）2、背景样式①background-color：背景颜色②background-image：背景图片（

2020-12-14 20:07:30 116

原创三分钟学会HTML中的表格制作

1、表格①表格：简单来说就是指单元格组成的②表格的作用：相对来说，表格的作用很简单，就是日常用于放数据的呗③表格的制作无非不就是三个词：table 、tr、 td ，其他的就是加属性，多的不说，上图代码来实现在这里插入图片描述其中width、height 是代表着宽度和高度设的值越大，则表格越大cellspacing:是表示着单元格与单元格之间的距离cellspacing给的值越大说明单元格之间的就越大，反之则相同*注意：这个值不能小于0border:表示着线框的属性：第一个值

2020-12-14 00:00:57 3125 2

joyouscola的博客