JavaScript
关注
分享
扫一扫
学习js
boboj1
web前端在职两年
展开
-
js实现图片懒加载的一个详细方案（引入即可使用）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>懒加载</title> <style> img { width: 600px; height: 450px; } </style> <script src="./lazyLoad.js"></scr原创 2022-05-28 22:30:07 · 445 阅读 · 0 评论 -
JavaScript中的数据拷贝
数据类型及拷贝方式JavaScript的数据类型分为基本类型和引用类型：基本类型有：numberstringbooleannullundefinedsymbol引用类型有：objectfunctionarray基本数据类型在拷贝的时候会产生新的副本，原值是不会改变的。引用数据类型在普通的赋值拷贝时，拷贝的是引用的地址。let arr = [1, 2, 3]let arr2 = arrarr2[0] = 0console.log(arr) // [0, 2, 3]正原创 2022-04-27 22:28:49 · 2109 阅读 · 1 评论 -
JavaScript原型、原型链、继承
原型prototype与__proto__先简单理解以下几句话：每一个对象都有一个__proto__属性，并且指向它的prototype原型对象每一个构造函数都会有一个prototype原型对象，prototype原型对象里的constructor指向构造函数本身直接看下面代码：function Person(name, age, sex) { this.name = name this.age = age this.sex = sex}// 先打印看看Person是什么// 打印原创 2022-04-27 22:26:50 · 1703 阅读 · 0 评论 -
JS中的this指向
以下为一个面试题：var obj = { foo: function() { console.log(this) }}var bar = obj.fooobj.foo() // objbar() // windowJavaScript中全局存在一个window对象，所有定义的函数或者变量都会挂载到window对象中，比如:var obj = 1//相当于window对象身上多了一个obj属性window: { obj: 1}所以bar()也可以写成window.原创 2022-04-27 22:03:50 · 1447 阅读 · 0 评论 -
原生JS+防抖，模拟滚动加载数据
思路：滚动条头部距离顶部的距离加上，滚动套自身的高度等于整个页面的高度滚动条高度（即可视窗口的高度）let clientHeight = document.documentElement.clientHeight滚动条头部距离顶部的高度let scrollTop = document.documentElement.scrollTop整个页面的高度（包括溢出看不见的高度）let scrollHeight = document.documentElement.scrollHeight.原创 2022-01-05 14:30:11 · 693 阅读 · 0 评论 -
原生js实现图片懒加载
<img data-src="https://pic.imgdb.cn/item/614ed1642ab3f51d91a0da60.jpg" ><img data-src="https://pic.imgdb.cn/item/6184d50c2ab3f51d910e3c4f.jpg" ><img data-src="https://pic.imgdb.cn/item/6184d41a2ab3f51d910cee6f.jpg" ><img data-src="h原创 2021-12-20 18:00:51 · 2242 阅读 · 0 评论 -
leetcode初级算法篇——数组（一）
1.删除排序数组中的重复项给你一个有序数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。判断当前位于后一位是否相等，相等则删除当前位，数组下标-1，从前一位开始再进行比较/** * @param {number[]} nums * @return {number} */var removeDuplicates = function(nums) { for(let i = 0; i < nums.length; i ++) {原创 2021-11-25 15:36:32 · 282 阅读 · 0 评论 -
什么是cookie?几行代码认识cookie,并学会cookie的封装
概念cookie叫做会话跟踪技术，在一次会话从开始到结束的整个过程中，全程跟踪记录客户端的状态。简介cookie:1.可以设置过期时间2.最大可以存储4KB，每一个域名下最多可以存储50条数据（不同的浏览器，有偏差）【只能是字符串】语法格式：name=value;expires=date;path=path;domain=somewhere.com;secure,name 健value 值 都是自定义encodeURIComponent 将中文编译成对应的字符dec原创 2021-05-30 19:05:43 · 415 阅读 · 0 评论 -
JavaScript【数据结构与算法】(一) 栈与队列
栈栈结构，栈结构就是在数组的基础上限制一些操作栈的常用方法push(): 添加一个新元素到栈顶pop(): 移除栈顶元素，同时返回被移除的元素peek(): 返回栈顶元素，不对栈做修改isEmpty(): 栈里无元素则返回truesize(): 返回栈的元素个数toString(): 将栈结构的内容以字符形式返回栈的代码实现//f封装栈类function Stack() { //栈的属性 this.items = [] //栈的操作 /原创 2021-07-25 19:44:29 · 488 阅读 · 1 评论 -
JavaScript函数防抖
debounce(func, delay) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { func.call(this, args); }, delay); }; }原创 2021-07-22 11:16:05 · 114 阅读 · 1 评论 -
《原神》官网首页练习
完成效果项目数据通过ajax请求data中的数据然后通过js动态渲染到页面中AJAX的封装请求的主要代码 function getInfo(index) { let message = null; switch (index) { case 0: $ajax({ method: 'get', url: '../data/newest.json', success: function (da原创 2021-07-20 12:42:12 · 2080 阅读 · 2 评论 -
原生js实现电子时钟
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <.原创 2021-06-10 09:16:45 · 255 阅读 · 0 评论 -
原生js实现拖拽，并设置拖拽边界
主要思路1.首先获取鼠标在方块中的位置，以下用到的知识点offsetLeft/offsetTop(元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档)e.clientX/e.clientY2.移动时鼠标的位置减去按下的时候鼠标在方块中的位置，将这个位置设置边界（range函数）知识点document.documentElement.clientwidth返回整个文档的可见宽度//判断边界问题//loc当前位置，Min最小位置，max最大位置functio原创 2021-06-03 17:07:42 · 2011 阅读 · 0 评论 -
javascript放大模式，宽放大模式
宽放大模式在放大模式的基础上，不管js文件引入顺序如何都能够正确的执行函数放大模式：moduleA.jsvar moduleA = (function(){ var count = 10; function showA() { count += 20; alert(count); } //返回的是一个对象 return { outA: showA }}());moduleA_plus.js//在mo原创 2021-06-01 19:40:35 · 484 阅读 · 0 评论 -
什么闭包？闭包的作用有哪些？闭包的注意事项
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏。直接看一个示例我想让数组的每一项都是一个函数，并且调用该函数的时候输出的是数组该项的下标 var arr = []; for(var i = 0;i < 5;i ++) { arr[i] = function() { console.log(i); }; } arr[0](原创 2021-05-30 23:16:59 · 175 阅读 · 0 评论 -
js实现冒泡排序和选择排序
冒泡排序冒泡排序是在每一轮中，依次往后每相邻两个之间进行比较每一轮比较都能够选择一个最大的数 var arr = [5, 4, 3, 2, 1]; for (var i = 0; i < arr.length - 1; i++) { //总共要进行几轮 for (var j = 0; j < arr.length - (i + 1); j++) {//每轮的排序次数 if(arr[j] > arr原创 2021-05-20 00:28:50 · 122 阅读 · 0 评论 -
js数组常用操作
数组三种声明方式var arr = new Array(10,20,true,"hello");var arr = Array(10,20,true,"hello");var arr = [10,20,true,"hello"];常用方法arr.pop()取数组末尾的数，返回的是取的值 var arr = new Array(1,2,3,4); arr.pop();//4 console.log(arr);//[1,2,3]原创 2021-05-20 00:27:16 · 155 阅读 · 1 评论 -
js求斐波拉契数列的第n项以及前n项和
通过递归的方式来处理递归的方法：首先去找临界值，无需计算就能得到的值找这一次和上一次的关系假设当前函数已经可以使用，调用自身计算上一次 //零界值为第一项和第二项的值都为1 function Fibonacci(n) { if(n == 1 || n == 2) { return 1; }else{ return Fibonacci(n-1) + Fibonacci原创 2021-05-19 19:31:27 · 1141 阅读 · 0 评论 -
输入年月日，计算这一天是该年的第几天
var year = 2021, month = 5, date = 19, sum = 0; switch(month) { case 12: sum += 31; case 11: sum += 30; case 10: sum += ...原创 2021-05-19 18:25:08 · 433 阅读 · 0 评论 -
JS正则表达式练习
js正则表达式总结：正则表达式总结练习：1.邮政编码：由6个数字构成，第一位不可以是0 var reg = /^[1-9]\d{5}$/;2.手机号码：由13/15/17/18开头的11位数字var reg = /^1[3578]\d{9}$/;3.QQ号：第一位不可以是0，位数在5-12位数字构成var reg = /^[1-9]\d{4,11}$/;4.检查是否是压缩文件：文件名由字母、数字、下划线构成，不可以以数字开头，后缀为.zip/rar/gzvar reg = /^[a-原创 2021-05-12 23:43:42 · 1016 阅读 · 0 评论 -
原生js实现渐变轮播图
效果预览全部代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-05-11 17:31:40 · 262 阅读 · 0 评论 -
js正则表达式基本总结
1.正则表达式的两种写法 var reg = /test/i; var reg1 = new RegExp('test','i'); 其中i为正则表达式修饰符 i : 执行对大小写不敏感的匹配。(匹配时忽略大小写) g : 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m : 执行多行匹配。2.支持正则表达式的 String 对象的方法search:检索与正则表达式相匹配的值。var reg = /[test]/g;var s原创 2021-04-19 11:13:30 · 243 阅读 · 1 评论 -
JavaScript中DOM的一些基本操作
查 <div> 123 <p></p> <a href=""></a> <strong></strong> </div>1.查看元素节点(1)document.getElementsByTagName();(2)document.getElementById();只有部分标签name可生效(表单,表单元素,img,iframe)原创 2021-04-09 19:24:31 · 97 阅读 · 0 评论 -
JavaScript使用setInterval实现简单的计数功能
html代码分：<input type="text" value="0">秒：<input type="text" value="0"><button>开始计时</button>javascript代码var input = document.getElementsByTagName('input');var min = 0;var miao = 0;var button = document.getElementsByTagName('bu原创 2021-04-09 18:58:18 · 511 阅读 · 0 评论 -
JavaScript中call和apply的用法与区别
call和apply的用法例子function Car(color,size) { this.color = color; this.size = size;}function SmallCar(color,size,date) { Car.call(this,color,size); this.date = date;}var car = new SmallCar('blue',12,23);在new的时候，SmallCar方法中的this指向car，然后通过Car.call()原创 2021-03-29 23:53:07 · 239 阅读 · 0 评论 -
JavaScript预编译
js运行三部曲语法分析预编译解释执行预编译前奏1.imply global暗示全局变量:即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有。eg:a = 123;eg:var a = b = 123;先将123赋值给b，但是b还没有声明，则b为全局对象2.一切声明的全局变量,全是window的属性。eg:var a = 123;==>window.a=123;预编译预编译的四个步骤1.创建AO对象2.找形参和变量声明，将变量和形参名作为AO属性名，值为unde原创 2021-03-25 18:21:01 · 122 阅读 · 0 评论 -
JavaScript中类型转换 typeof
typeof的返回值1.number2.string3.boolean4.object (null...)5.function6.undefined类型转换1.显示类型转换(1)Number() Number(null)-->0 Number(undefined)-->NaN 将括号里面的转换为数字类型，如果不是数字转换为NaN(2)parseInt() 将括号里面的转换为整型数字，小数点后面的直接去掉,parseInt(tru原创 2021-03-18 14:38:19 · 138 阅读 · 0 评论