自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 npm i, 但是不修改package-lock.json 文件

package-lock.json 文件的作用锁定安装时的包的版本号,并且需要上传到 git,以保证其他人在 npm install 时大家的依赖能保证一致。npm i, 但是不修改package-lock.json 文件。

2023-11-23 16:50:12 127

原创 使用html2canvas实现指定页面生成图片并下载

【代码】使用html2canvas实现指定页面生成图片并下载。

2023-11-20 15:51:03 192

原创 获取url参数的方法

这行代码就可以获取当前页面的url参数。(注:ie兼容有问题)

2023-07-21 16:11:46 71

原创 js日期时间排序

data= [ { "id": 9189, "time": "2020-06-28", }, { "id": 9229, "time": "2020-06-24", }, { "id": 10448, "time": "2020-07-07", }, {

2021-09-07 16:05:28 439 1

原创 js数组方法及返回值

1 arr.push() 从后面添加元素,返回值为添加完后的数组的长度2 arr.pop() 从后面删除元素,只能是一个,返回值是删除的元素3 arr.shift() 从前面删除元素,只能删除一个 返回值是删除的元素4 arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度5 arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素(array.splice(index,howmany,item1,…,itemX))*index*:必需。规定从

2021-08-18 19:27:15 7934

原创 关于typeof null == ‘object‘ 和 null == undefined

null 有属于自己的类型 Null,而不属于Object类型,typeof 之所以会判定为 Object 类型,是因为JavaScript 数据类型在底层都是以二进制的形式表示的,二进制的前三位为 0 会被 typeof 判断为对象类型,而 null 的二进制位恰好都是 0 ,因此,null 被误判断为 Object 类型。000 – 对象,数据是对象的应用1 – 整型,数据是31位带符号整数010 – 双精度类型,数据是双精度数字100 – 字符串,数据是字符串110 – 布尔类型,数据是布

2021-08-13 11:54:00 324

原创 从url中获取参数的方法

通过正则验证获取url中的参数function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null;} // 调用方法var uname = Ge

2021-07-23 09:59:01 407

原创 JavaScript 数组去重的 4 种方法及性能比较

说明简单测试下 JavaScript 4 种去重算法的效率。使用哈希表记录是否重复用内建 indexOf 函数判断是否重复组合内建 filter 和内建 indexOf全新的 new Set()代码var arrayLength = 500var numberRange = 50var array = genRandomNumberArray()function genRandomNumberArray() { return Array(arrayLength) .fi

2021-06-22 18:46:43 156

原创 类数组转换成数组的方法

Array.from()Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。语法:Array.from(arrayLike[, mapFn[, thisArg]])arrayLike想要转换成数组的伪数组对象或可迭代对象。mapFn 可选如果指定了该参数,新数组中的每个元素会执行该回调函数。thisArg 可选可选参数,执行回调函数 mapFn 时 this 对象。console.log(Array.from('foo'));// expecte

2021-06-22 18:19:40 153

原创 js常用的循环遍历

数组遍历随着 JS 的不断发展,截至 ES7 规范已经有十多种遍历方法。下面按照功能类似的方法为一组,来介绍数组的常用遍历方法。for、forEach、for …ofconst list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];for (let i = 0, len = list.length; i < len; i++) { if (list[i] === 5) { break; // 1 2 3 4 // continue; // 1

2021-06-15 17:21:14 156

原创 高效 VS Code 快捷键

快捷键功能评价Ctrl+X剪切一行免去手动选择的麻烦Ctrl+C复制一行免去手动选择的麻烦Ctrl+L选择一行(包含换行符)免去手动选择的麻烦Shift+Alt+↑/↓复制到上/下一行我个人来说大多数复制的情况都是复制到上下行,所以这个快捷键还能省掉一个粘贴Ctrl+Shift+K删除一行极大方便Ctrl+]/[缩进以前很常用,但是在用 prettier 之后基本不会手动缩进Home/End移动到行头/尾使用得不算多,但可...

2021-06-15 16:19:39 115

原创 ajax封装

(function (){ function myAjax(obj){ // 处理参数 if(obj.type.toLowerCase() == "get"){ var arr = [];//"name=hdz","age=18" for (var pro in obj.data) { var str = pro + '=' + obj.data[pro]

2021-06-08 13:07:30 34

原创 HTTP 缓存简析

概述HTTP 缓存的核心是 header 的 Cache-Control 属性。这个属性请求和响应都可用,不过请求头的 Cache-Control 一般只用于阻止代理(proxy)缓存(相关问题),因此我们可以重点关注响应头。其中代理(proxy)是指客户端到服务器中间的可能经过的地方,有可能用于数据转发和缓存。HTTP 缓存有两个关键字:新鲜度(Freshness),校验(Validation)新鲜度是指缓存是否依然生效,在过期前,他就是新鲜的,过期后,则被称为 stale。而校验是指客户端向

2021-06-07 20:18:00 94

原创 前端知识清单

一、JavaScript 基础实际上,除了坚持学习的强大的自驱力,你还需要一个很简单的学习方法。那就是:建立自己的知识体系。它能帮助你更系统性的学习,同时你也时刻能知道自己哪些地方是不足的。我会把我工作和学习中接触到的知识全部归纳到我的知识体系中,其中不仅仅包括我已经学过的,还有很多我没有来得及学习的。这不仅仅是我的知识体系,更是我时刻提醒自己的自检清单。下面我会把我的自检清单分享给大家,你可以按照清单上的知识检测自己还有哪些不足和提升,我也建议大家建自己的知识体系前端工程师吃饭的家伙,深度、广度

2021-05-25 18:41:44 242

原创 JavaScript中的匿名函数与闭包

Javascript中,闭包无疑是重要的一个环节,入门时多半会被弄晕。下面先从一个例子入手:function lazy_sum(arr) { var sum = function () { return arr.reduce(function (x, y) { return x + y; }); } return sum;} var f1 = lazy_sum([1, 2, 3, 4, 5]);var f2 = la

2021-05-24 21:06:18 195

原创 常见网络错误

HTTP 400 - 请求无效HTTP 401.1 - 未授权:登录失败HTTP 401.2 - 未授权:服务器配置问题导致登录失败HTTP 401.3 - ACL 禁止访问资源HTTP 401.4 - 未授权:授权被筛选器拒绝HTTP 401.5 - 未授权:ISAPI 或 CGI 授权失败HTTP 403 - 禁止访问HTTP 403 - 对 Internet 服务管理器 的访问仅限于 LocalhostHTTP 403.1 禁止访问:禁止可执行访问HTTP 403.2 - 禁止访问:

2021-05-17 13:32:13 851

原创 scale和translate会导致移动图片时模糊或闪黑屏

scale和translate会导致移动图片时模糊或闪黑屏0x000 前言在移动端使用了scale和translate属性实现双击放大图片变可移动的功能,测试时却发现在chrome(83.0(64 位))浏览器下jpg、png和gif格式在不同情况下会有所不同(firefox 61.0 64位版未出现这种情况)。png格式移动图片时图片变模糊png格式移动图片闪黑屏注:不使用transition属性添加过渡效果的话三种格式都不会导致图片移动时模糊,只有jpg格式也不会导致图片移动时模糊。0x00

2021-05-17 13:17:30 739

原创 吃豆人

<!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"> <title>Do

2021-05-12 09:13:16 55

原创 打地鼠无敌版

<!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> body{

2021-05-12 09:11:31 67

原创 老生常谈的原型链

prototype只有函数有prototype,对象没有。//函数function A(){}A.prototype//会输出类似下面的东西{ constructor: A, __proto__:Object}//对象a={}a.prototype //输出undefined//而如果你给一个对象赋予 prototype,效果不过是多了一个 prototype 属性proto__proto__可以看做是一种 “连接”, 所到之处的属性(property)都可以访问。a =

2021-05-05 19:24:16 37

原创 vscode中文设置和一些常用快捷键

VSCODE相关配置中文设置按快捷键“Ctrl+Shift+P”。在“vscode”顶部会出现一个搜索框。输入“configure language”,然后回车。“vscode”里面就会打开一个语言配置文件。将“en-us”修改成“zh-cn”。按“Ctrl+S”保存设置。关闭“vscode”,再次打开就可以看到中文界面了。如果你不愿意设置也没关系,可以在扩展中直接安装它的中文插件,还是很人性化的。在这里插入图片描述禁用自动更新文件 > 首选项 > 设置(macOS

2021-05-04 21:05:11 3266

原创 作用域和作用域链以及预编译

作用域作用域是指代码的运行环境,全局作用域就是指全局执行环境,函数的执行环境是私有作用域,它们都是栈内存,不同的是基本数据类型储存的是数值,引用数据类型(对象)储存的是地址。执行环境定义变量和函数的访问权利,决定了它们各自的行为。每个执行环境都有自己相关联的变量对象,全局变量对象GO对象(Global Object),函数变量对象AO对象(Activation Object),每一次调用函数都会产生一个全新的AO对象。在Web浏览器中全局作用域被认为是window对象,因此所有的全局变量、方法都可以认

2021-04-25 20:17:29 100

原创 一个简单的2048小游戏

2048小游戏的核心是:通过控制键盘上的“上”、“下”、“左”、“右”键来实现数字的移动、相加、以及生成新的数字。上图为运行后的结果,我随便操作了几下,可以看到图片上有数字2,数字4,数字8,数字16,数字32,其中只有2和4是可以随机生成的,其他的都是根据上下左右操作获得的,下面提供2048的js代码:var game={ score :0, //分数 status :1, gameover :0, //游戏结束 gamerunning :1, //游戏

2021-04-22 20:54:16 444

原创 轮播图JS代码

<div class="wrapper"> <ul class="sliderPage"> <li><img src="image/1.jpg" alt=""></li> <li><img src="image/2.jpg" alt=""></li> <li><img src="image/3.jpg" al

2021-04-22 09:45:57 2432

原创 CSS四种导入方式以及三种基本选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!--内部样式--> <style> h1{ color:green; } </style> &

2021-04-19 20:02:15 92

原创 DOM节点的获取

DOM是什么核心理念:是将一个HTML或者xml文档,用对象模型表示,每一个对象就被成为DOM对象,DOM对象又称之为节点node。节点名称: DocumentType-------- 文档类型节点```<!DOCTYPE html>``` Document 文档节点,表示整个文档,不是html标签 Comment--------注释节点 Element --------元素节点 Text --------文本节点 Attribute --------属性节点 Documen

2021-04-13 08:30:40 234

原创 对象的调用和构造函数

1.函数都有返回值,如果没有设置返回值,打印函数会返回undefined。function say(){ console.log("so cool");}console.log(say());控制台输出:so cool 和 undefined。**2.对象属性调用的两种方法:**①对象名.属性名–适用于大多数情况②对象名[“属性名”]–所有情况都可以使用此方法,不同于对象名.属性名,该方法可以适用于属性名为数字、不符合变量名规则的属性。对象的创建方法:1.利用字面量创建对象:var

2021-04-12 19:06:44 1507

空空如也

空空如也

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

TA关注的人

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