JavaScript
关注
分享
扫一扫
文章平均质量分 52
JavaScript
Start_t
这个作者很懒，什么都没留下…
展开
-
async/await实现异步
async/await实现异步await表示等一下，即暂停不再向下执行，等到promise对象执行完毕，拿到promise resolve的值并进行返回，拿到返回值后再继续向下执行下面来看几个例子 async function async_test() { return 'hello world' } async_test(); // console.log(async_test()) // Promise {<fulfilled>: "hello world"}原创 2021-03-06 16:11:45 · 264 阅读 · 0 评论 -
swiper---指示器加上过渡动画
swiper---指示器加上过渡动画主要体现的功能：1.指示器会跟随轮播图出现类似进度条的，每个轮播图的过渡时间就是下面一个指示器执行完毕动画需要的时间2.上一页、下一页的切换也会带动指示器动画及加载完的变化3.点击指示器，能实现已加载和未加载完毕指示器样式的变化效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2021-01-14 15:33:09 · 1882 阅读 · 0 评论 -
操作数组，将重复的值进行累加
操作数组，将重复的值进行累加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作数组，将重复的值进行累加</title></head><body>原创 2021-01-06 13:10:53 · 619 阅读 · 1 评论 -
audiojs插件
audiojs插件大概显示效果是这样的，这里也可以显示播放文件的文件名，但是我把那个方法给注释了，需要的直接取消注释就可以了，中间的五角星是模拟音乐盘转动的（点击播放转动，暂停即停止转动，不会复位）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2021-01-05 14:34:47 · 1764 阅读 · 0 评论 -
promise
promise概念：简单说promise就是一个容器，里面保存着某个未来才会结束的事件的结果，它可以获取异步操作的信息三种状态（只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，即—不受外界影响和不可逆）：Pending（进行中）Resolved（已完成，又称 Fulfilled）Rejected（已失败） //注意：promise是全部都成功时才成功...原创 2020-04-09 12:36:16 · 152 阅读 · 0 评论 -
闭包
闭包localStoragesessionStorage区别：cookie：文本、大小4kb、数量限制为50条、会话级（非永久存储）、不允许跨域、跟随http发送至服务器localStorage:文本、大小5M、永久存储、不允许跨域、不跟随http发送至服务器sessionStorage:文本、大小5M、会话级（非永久存储）、不允许跨域、不跟随http发送至服务器localStora...原创 2020-04-07 19:05:33 · 151 阅读 · 0 评论 -
本地存储---localStorage和sessionStorage
本地存储---localStorage和sessionStoragelocalStoragesessionStorage区别：cookie：文本、大小4kb、数量限制为50条、会话级（非永久存储）、不允许跨域、跟随http发送至服务器localStorage:文本、大小5M、永久存储、不允许跨域、不跟随http发送至服务器sessionStorage:文本、大小5M、会话级（非永久存储）...原创 2020-04-05 19:53:48 · 402 阅读 · 0 评论 -
cookie
cookie通信协议： IP地址：互联网上所有设备的唯一地址 TCP：面向连接的协议（可靠，又称三次握手，应答式-》即一应一回，无法保证数据发送的顺序及准确率） UDP：面向数据的协议（不可靠，发送后不知道对方是否收到） HTTP：超文本传输协议，网页传输协议，用于浏览器和服务器（特点：无状态协议，记性差） cookie：会话跟踪技术（）本地存储，解决http记不住状态的问题coo...原创 2020-04-04 16:10:22 · 267 阅读 · 0 评论 -
回调函数
回调函数当一个函数A作为参数传给另一个函数B，在函数B中被执行，这个函数A叫做回调函数function fn(a){ var num = 999; a(num);}fn(function(n){ console.log(n); //999})...原创 2020-04-04 12:39:44 · 150 阅读 · 0 评论 -
作用域
作用域当前作用域（参数）->父级作用域-> … ->全局作用域->抛出错误1.var a = 10;function fn(){ var a = 20; console.log(a); //20}fn();console.log(a); //10var a = 10;function fn(){ //相当于全局 a = 20; con...原创 2020-04-03 15:33:19 · 229 阅读 · 0 评论 -
jsonp
jsonp我们知道ajax是实现前后端数据交互，但如果遇到不同域名呢？这就要想到我们的jsonp了发生跨域的情况：1.当本机请求服务器上数据的时候2.当本地服务器请求其它服务器数据的时候跨域：同源策略：基于浏览器的安全考虑，浏览器各个厂商之间出现了一个约定，这个约定叫做同源策略。这个约定的主要内容就是，域和域之间数据不共通。 同源是指：同协议、同域名、同端口jsonp跨域原...原创 2020-04-03 14:16:45 · 166 阅读 · 0 评论 -
ajax
ajaxajax是前后端数据交互的桥梁，可以实现无刷新状态更新页面同步和异步： 同步：不执行完上面的代码，下面的代码就执行不了，一步一步执行。 异步：可以一起执行的代码（计时器，事件）程序，进程和线程： 程序：功能 进程：一个功能从开始执行到执行结束是一个进程 线程：在一个进程的开始到结束的过程中的多条分支 js：单线程，使用异步，模拟除了多...原创 2020-04-02 19:49:27 · 154 阅读 · 0 评论 -
瀑布流 + 无限加载效果
瀑布流效果缺点：影响性能主要实现步骤：1.区分第一行和后面的行2.第一行浮动3.获取第一行所有的高度4.找到最小高度的图片5.后面进行定位6.定位到上一行最矮图片的位置下7.修改当前最小值（后面的图片一次加上最矮图片的高度）8.从步骤4开始循环//css .cont{margin:0 auto;position: relative;} /* 这里不用margin是因为of...原创 2020-03-27 13:51:41 · 458 阅读 · 0 评论 -
放大镜效果
放大镜效果//css #box_l {width: 400px;height: 450px;border:1px solid #000;position: absolute;left: 50px;top: 100px;} #box_l img{width: 400px;height: 450px;} #box_l span{background:rgba(200,200,200,0.6);...原创 2020-03-26 14:31:17 · 237 阅读 · 0 评论 -
面向对象
面向对象两种工厂模式原型对象核心：高内聚，低耦合（依赖）面向分析—OOA面向设计—OOD面向对象—OOP首先，我们先来区分一下面向过程和面向对象面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了面向对象：先实现功能，再运行。分工协作，同时发生，解决问题面向对象的特点：封装--------不考虑内部实现，只考虑功能实现多...原创 2020-03-24 12:29:53 · 98 阅读 · 0 评论 -
ES6
ES6ES6let / const,字符串的方法字符串拼接箭头函数解构赋值symbol类型set / mapclass类的继承---extendsES5:’ use strict ’ 严格模式新增的方法indexOf(字符串,开始位置) 返回指定字符串的固定位置forEach(回调函数) 遍历数组的,返回key和valuemap(回调函数) 返回新的数组filt...原创 2020-03-20 15:11:51 · 315 阅读 · 0 评论 -
JS正则
全选与反选正则匹配的方法正则语法正则的作用：1、对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证2、网络爬虫(一个网站到另一个网站的页面上去获取对方的相关信息)3、内容替换、获取4、前台的验证、正则处理满足条件的字符串（网络爬虫 Python编程）数据采集（大宗点评：商家评论 抓取） curl函数库：模拟http请求。创建方式//字面量 var reg = /hell...原创 2020-03-13 14:38:12 · 181 阅读 · 0 评论 -
Event事件
Event事件事件鼠标事件页面事件表单事件键盘事件event事件对象属性事件冒泡（阻止）浏览器的默认行为事件监听案例js控制页面的行为是由事件驱动的。 什么是事件？（怎么发生的） 事件就是js侦测到用户的操作或是页面上的一些行为 事件源（发生在谁身上） 引发事件的元素 事件处理程序（发生了什么事） 对事件处理的程序或函数 事件对象（用...原创 2020-03-12 13:15:37 · 559 阅读 · 0 评论 -
DOM文档对象模型
DOM文档对象模型DOM：文档对象模型DOM选择器2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息3.navigator对象4.window.onscroll／onresize ／onload()事件DOM：文档对象模型作用: 使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等）...原创 2020-03-10 15:38:39 · 540 阅读 · 0 评论 -
全选与反选
全选与反选全选：1.让 name 为 h的复选框的checked值 和 当前点击的复选框的checked值保持一致2.将当前点击的复选框的checked值 赋值给 后面每一个要操作的复选框反选：1.遍历所有复选框，判断哪一个复选框是被选中的，如果被选中就清除checked值2.否则 就设置checked值//body <input type="checkbox" name="...原创 2020-03-08 21:30:26 · 176 阅读 · 0 评论 -
BOM浏览器对象
BOM浏览器对象BOM:浏览器对象window对象:window内置子对象1.history对象:该对象包含浏览器访问过的url2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息3.navigator对象4.window.onscroll／onresize ／onload()事件BOM:浏览器对象作用:提供一系列对象用于与浏览器窗口进行交互。e...原创 2020-03-08 16:59:29 · 221 阅读 · 0 评论 -
延时器和计时器
延时器和计时器延时器计时器3.判断某一天是星期几延时器setTimeout(回调函数,毫秒数)功能：延迟指定的毫秒数，只执行一次回调函数清除延时器：clearTimeout（延时器的返回值）<script type="text/javascript"> setTimeout(function(){ console.log(1s后); },1000)</s...原创 2020-03-08 16:08:15 · 1031 阅读 · 0 评论 -
Math数学对象与Date日期对象
Math数学对象Math数学对象Date日期对象1.获取当前系统时间2.设置固定时间3.判断某一天是星期几Math数学对象Math数学对象Math.random()返回0~1之间的随机数Math.max(num1,num2,num3,…,numN)返回最大的一个数，可以写多个Math.min(num1,num2,num3,…,numN)返回最小的一个数，可...原创 2020-03-03 18:44:56 · 434 阅读 · 0 评论 -
JS对象
JS对象1.对象的创建<script type="text/javascript"> var obj = {} //字面量 var obj2 = new Object() //构造函数 var obj3 = new 自定义的函数() //构造函数 console.log(obj == obj2 ) //false</script&...原创 2020-03-03 17:38:29 · 197 阅读 · 0 评论 -
进制转换
进制转换在进制中，只有十进制是number，其它都是字符串<script type="text/javascript"> //十进制转其他 var x=110; console.log(x); console.log(x.toString(2) + "这是2进制"); console.log(x.toString(8) + "这是8进制"); ...原创 2020-03-03 16:36:26 · 333 阅读 · 0 评论 -
ES6的set和map集合
ES6的set和map集合1.setset集合，本质上就是对数组的一种包装var s = new Set([3,4,5,6,7]); s.add(8) s.add(8) s.add("8") s.add(8) s.add("9") s.add(9) s.add(9) s.add(1) s.add(3) conso...原创 2019-12-06 23:46:01 · 179 阅读 · 0 评论 -
ES6箭头函数的this指向（适合小白理解）
ES6箭头函数的this指向（适合小白理解）1.箭头函数适用的场景作为一个值存在：var fn = ()=>{ console.log("HELLO")}fn() //HELLO作为事件存在：document.onclick = ()=>{ console.log(1)}; //1作为参数存在：setTimeout(() => { co...原创 2019-12-06 22:40:22 · 549 阅读 · 0 评论 -
ES6箭头函数
ES6箭头函数写在前面1.箭头函数语法2.this的指向3.构造函数4.变量提升5.换行写在前面缺点：箭头函数是不能new的，它的设计初衷就跟构造函数不太一样箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=>({id:3, val=20})对代码的可读性伤害太大1.箭头函数语法原有方法的声明函数//function普通函数...原创 2019-11-30 20:48:42 · 921 阅读 · 0 评论 -
数组排序
数组排序1.冒泡排序将数组中的元素,两两比较,大的放后面var arr = [45,2,56,123,76]; //定义一个杂乱的数组 for(var i=0;i<arr.length-1;i++){ //大循环，用于遍历数组每个元素 for(var j=0;j<arr.length-i-1;j++){ //小循环，用于将数组中...原创 2019-12-22 21:55:08 · 183 阅读 · 0 评论 -
get、post、jsonp的封装
get、post、jsonp的封装get、post、jsonp的封装get与post的区别jsonp与get、post的区别get封装post封装jsonp的封装get与post二合一封装get、post、jsonp三合一封装get、post、jsonp的封装get与post的区别get与post都可以在ajax中都可以用来发送数据，那么它们两者的区别如下：POST主要用来发送数据，GE...原创 2019-08-26 15:31:18 · 548 阅读 · 0 评论 -
js中字符串的方法
js中字符串的方法写在前面写在前面浅拷贝只拷贝地址，不拷贝值浅拷贝改变对象里面的值另一个会改变，深拷贝不会改变var obj = {name:"Admin"};var obj2 = obj;obj2.name = "root";console.log(obj.name,obj2.name) //root,rootconsole.log(obj == obj2) //true2....原创 2019-12-26 17:00:48 · 796 阅读 · 0 评论 -
js中的深浅拷贝
js中的深浅拷贝说到深浅拷贝，我们得先来了解一下栈和堆每个内存单元中分为两个部分，栈和堆栈在内存的最底部，类似于一个标记，名字，分类；稳定，不可更改，空间小堆数据，表示一组数据，可变更，数据量大，和栈一一对应多个栈可以对应一个堆，反之不行变量的声明，变量名存在了栈中变量的赋值，数据存在了堆中怎么区分深拷贝与浅拷贝，简单点来说，就是如果B复制了A，当修改B时，看A是否会发生...原创 2019-12-22 23:46:32 · 209 阅读 · 0 评论 -
JS箭头函数和普通函数的区别
JS箭头函数和普通函数的区别写在前面1.箭头函数与function定义函数的写法2.this的指向3.构造函数4.变量提升5.换行写在前面箭头函数是普通函数的简写，而箭头函数和普通函数的差异如下：1、this指向。箭头函数的this永远指向其上下文的this，没有办法改变其指向；而普通函数的this指向调用它的对象2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，...原创 2019-11-30 13:30:23 · 600 阅读 · 0 评论 -
JS变量的提升
JS变量的提升声明提升函数提升声明提升所有使用var声明的变量都会提升：提升到作用域一开始的位置被声明，该赋值的位置再赋值var a = 10;console.log(a) //10console.log(a) //undefinedvar a = 10;上面的相当于将a提升到作用域最上面，而赋值还是在最后面：var a;console.log(a); //undefi...原创 2019-09-23 00:36:25 · 138 阅读 · 0 评论 -
JS中数组的方法
JS中数组的方法JS中数组的方法写在前面使用方法JS中数组的方法写在前面arr.sort(); 给数组排序，先数字后英文再中文；arr.reverse(); 反转数组元素；arr.join(str); 将数组划分为字符串，数组元素以str分隔（默认是逗号）；arr.concat(arr1,arr2,…,arr3); 合并数组，可以是多个，多个之间用逗号隔开“,”；arr.p...原创 2019-09-16 18:54:08 · 755 阅读 · 0 评论 -
JS的自增与自减
JS的自增与自减一元运算符一元运算符的特点看如下题目：一元运算符一元运算符的特点只能操作一个运算符，叫做一元运算符a++； 表达式值： ++后置，先取a的值，然后再进行+1操作；a- -； 表达式值： - -后置，先取a的值，然后再进行-1操作；++a； 表达式值： ++前置，先进行+1操作，然后再取a的值；-a； 表达式值： - -前置，先进行-1操作，然后再取a的值...原创 2019-09-08 23:18:06 · 184 阅读 · 0 评论 -
JS的原型继承
JS的继承欢迎使用Markdown编辑器新的改变写在前面构造函数的继承合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用M...原创 2019-09-01 21:52:59 · 378 阅读 · 1 评论