
JavaScript
半生过往
拼搏到无能为力,坚持到感动自己。
展开
-
字符串提取 中文、英文、数字
有时候需要判断拿到的字符串包含 中文、英文、数字,判断是否包含某些字段。原创 2022-08-03 14:11:54 · 1686 阅读 · 0 评论 -
有用的前端技巧
JavaScript单行代码 在项目中高效开发1、生成随机字符串2、获取两个数字之间的随机整数3、字符串中每个单词的第一个字符大写4、删除数组中的重复值5、删除数组对象的重复值6、展平一个数组7、从数组中删除虚假值8、检查一个数字是偶数还是奇数9、获取参数的平均值10、将数字保留固定小数点11、计算两个日期相差天数12、从日期中获取一年中的哪一天13、生成一个随机的十六进制颜色14、将RGB颜色转换为十六进制15、清除所有cookies16、检测暗模式17、交换两个变量18、暂停一会1、生成随原创 2022-04-11 23:24:03 · 2458 阅读 · 0 评论 -
Javascript 数组方法整理
Javascript 数组方法整理原创 2022-04-11 02:27:16 · 255 阅读 · 0 评论 -
常用的JS工具库
文章目录1.Day.js2.qs3.js-cookie4.flv.js5.vConsole6.Animate.css7.animejs8.lodash.js9.mescroll.js10.Chart.js1.Day.js极简的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。npm install dayjs// 基本用法import dayjs from 'dayjs'dayjs().format('YYYY-MM-DD原创 2022-02-14 10:24:16 · 965 阅读 · 0 评论 -
字符串的操作方法
文章目录concat('字符串1','字符串2'……)substr('截取的起始位置(索引号)','截取几个字符串')slice(start,end)substring(start,end)替换字符 replace('被替换的字符','替换为的字符')只会替换第一个字符字符串转换为数组split('分隔符')toUpperCase() 转换大写toLowerCase() 转换小写concat(‘字符串1’,‘字符串2’……)用于链接两个或多个字符串拼接字符串 等效于+ +更常用let st原创 2022-01-26 16:18:12 · 303 阅读 · 0 评论 -
数组的方法
文章目录数组的添加push ——后面`追加(有参数)unshift ——前面`追加(有参数)删除数组元素pop ——删除 最后一个(没参数)shift ——删除 最前一个(没参数)splice(index,len,[item]) ——删除、替换、添加 数组的某一项slice()——截取数组concat——数组拼接数组排序reverse ——数组翻转sort ——数组排序 / 冒泡排序数组的索引indexOf(数组元素)——从前面开始查找indexOf 封装数组去重lastIndexOf(数组元素)——从后面原创 2022-01-26 16:04:10 · 997 阅读 · 0 评论 -
JS当前时分秒 格式 xx:xx:xx
function getTime(){ let time = new Date(); let h = time.getHours(); h = h < 10 ? '0' + h : h; let m = time.getMinutes(); m = m < 10 ? '0' + m : m; let s = time.getSeconds(); s = s < 10 ? '0' + s : s; return `${h}:${m}:${s}`;}console.log(原创 2022-01-25 17:55:00 · 1017 阅读 · 0 评论 -
今年是平面还是闰年
**算法:**能被4整除且不能整除100的为闰年,或者能被400整除的是闰年。let year = prompt('请输入年份')if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){ alert('您输入的年份为闰年')} else { alert('您输入的年份为平年')}...原创 2022-01-24 11:05:27 · 299 阅读 · 0 评论 -
获取JavaScript时间戳函数的方法和js时间戳转时间方法
文章目录一、JavasCRIPT时间转时间戳方法一:Date.now()方法三:valueOf()方法四:getTime()方法五:Number二、js时间戳转时间方法一:生成'yyyy/MM/dd 上(下)午hh:mm:ss '格式方法二:生成'yyyy-MM-dd hh:mm:ss '格式三、知识普及1、当前系统区域设置格式(toLocaleDateString和toLocaleTimeString)2、普通字符串(toDateString和toTimeString)3、格林威治标准时间(toGMTS原创 2022-01-19 17:57:48 · 16895 阅读 · 0 评论 -
css js 辅助学习巩固知识可以边玩边学边记的网站
文章目录CSS相关的学习网站1.Flex Box 冒险游戏2.Flexbox 格子骑士:3.Flex Box 青蛙:4.Flex Box 打僵尸:5. Flex Box 保卫战6. Flex语法操纵台7. Grid 花园8.CSS Grid 备忘清单9.Grid 攻击10.CSS 选择器备忘清单11. CSS 动画12. 混合滤镜13. CSS晚餐JavaScript学习网站1. TypeScript 练习2. 设计模式游戏3.React 教程4.Untrusted5. Promisees6. JSchal原创 2021-12-31 15:29:34 · 493 阅读 · 0 评论 -
vue中input输入框常用事件的使用
文章目录@input(或者是v-on:input)@blur(失焦)@focus(聚焦)@change(改变)@click (点击)@dblclick(双击)@keydown(当键盘按下)@keyup.enter(当按下回车键)@input(或者是v-on:input)输入框里面内容发生改变(且不用失去焦点)时触发跟随输入框输入内容实时变更数据适用于实时查询,每输入一个字符都会触发该事件@blur(失焦)输入框失去焦点时触发输入框在输入完成、移到其他地方时进行验证时,需要用到该事件,用此事件进原创 2021-12-14 13:45:30 · 11007 阅读 · 0 评论 -
重学前端笔记
文章目录JavaScript基本类型UndefinedNullBooleanStringNumber【为啥0.1+0-2≠0.3】SymbolObject类型转换**StringToNumber****NumberToString**详解js中Number()、parseInt()和parseFloat()的区别parseInt() 和parseFloat() 的区别在于:**装箱转换**拆箱转换JavaScript对象JavaScript 对象的两类属性JavaScript基本类型JavaScrip原创 2021-12-03 01:56:31 · 417 阅读 · 0 评论 -
排序数组方法
文章目录(1) 数值排序 | 上升(2) 数值排序 | 降序(3) 字母排序 | 上升(4) 字母排序 | 降序(5) 日期排序 | 上升(6) 日期排序 | 降序(1) 数值排序 | 上升const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){ return a-b;});之前:[40,100,1,5,25,10]之后:[1,5,10,25,40,100]说明:对于数字排序,必须创建 Comparator 实体或比较函原创 2021-11-24 09:06:31 · 217 阅读 · 0 评论 -
ES6常用知识点梳理
文章目录let 和 const解构赋值字符串数组函数rest运算符 【...】对象class新的数据类型——Symbol新的数据结构 set map模块化Promisegeneratorasynclet 和 const let 和 const 与 var 的区别: 1.增加块级作用域 在es6之前,js只有一种作用域叫做函数作用域。 2、没有预解析,不存在变量提升 3、不能重复定义 4、var声明的变量属于window, Let 和 const不是const (const 声明的常量)原创 2021-10-17 17:02:49 · 238 阅读 · 0 评论 -
JavaScript 数据类型
在 JavaScript 中有 6 种不同的数据类型: string number boolean object function symbol 3 种对象类型: Object Date Array 2 个不包含任何值的数据类型: null undefined请注意:NaN 的数据类型是 number数组(Array)的数据类型是 object日期(Date)的数据类型为 objectnull 的数据类型是 object未定义变量的数据类型为 undefine原创 2021-09-24 16:01:19 · 132 阅读 · 0 评论 -
JavaScript 关键字
JavaScript 保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。以下是 JavaScript 中最重要的保留字(按字母顺序):abstractelseinstanceofsuperbooleanenumintswitchbreakexportinterfacesynchronizedbyteextendsletthiscasefalselongthrowcatchf原创 2021-09-24 09:55:41 · 243 阅读 · 0 评论 -
split().reverse().join()用法
split().reverse().join()用法split(): 方法用于把一个字符串分割成字符串数组。reverse(): 方法用于颠倒数组中元素的顺序。join():方法也就是把数组中的所有元素以字符串的形式输出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2021-09-18 14:02:45 · 844 阅读 · 0 评论 -
异步解决方案有哪些
解决方案:/*---------1.回调函数callback:----------*///被作为实参传入另一函数,并在该外部函数内被调用,用以来完成某些任务的函数。如setTimeOut,ajax请求,readFile等。//例:function greeting(name) { alert('Hello ' + name);}function processUserInput(callback) { var name = prompt('请输入你的名字。'); callback原创 2021-07-28 09:46:55 · 812 阅读 · 0 评论 -
ajax 与 xhr
文章目录ajax: A:异步 ;J: javascript ;A :and ;X :XML;前后端交互: ❶ 前端发送请求 ❷ 后端接收请求; ❸后端处理请求; ❹ 后端返回响应; . ❺ 前端处理后端的响应;前端发送请求方式: form表单; 传统请求方式; . 会让页面跳转并刷新页面;前端因为发现了这些问题,所以发明了一个 新的请求发送方式:ajax 无刷新的页面请求发起方式; 这个行为是有JS来执行的; 让页面实现局部刷新;ajax这个技术目标是在页面之中无刷新的发原创 2021-07-26 19:19:13 · 782 阅读 · 0 评论 -
ECMAScript6基本 使用
文章目录ECMAScript61、ES6简介1.1、什么是ES61.2、ECMAScript和JavaScript的关系1.3、为什么要学习ES6?2、ES6环境搭建2.1、前期准备2.2、ES6环境搭建3、let与const3.1、let命令3.2、const命令4、ES6解构赋值4.1、解构赋值概述4.2、解构模型4.3、数组的解构赋值4.4、对象的解构赋值4.5、解构赋值注意事项4.6、解构赋值的用途5、字符串、函数、数组、对象的扩展5.1、模板字符串5.2、字符串扩展方法5.3、函数的扩展5.4、数转载 2021-07-23 21:26:29 · 552 阅读 · 0 评论 -
JavaScript 的 深浅 拷贝
深浅 拷贝所谓的 深拷贝 浅拷贝 是 对 引用 数据类型而言的如果变量储存的数据是 基本数据类型 例如 字符串,数值,布尔值等没有所谓的 深浅拷贝浅拷贝 所谓的 浅拷贝 只是 复制变量中存储的内存地址 效果是 多个变量 存储相同的 内存地址, 操作相同的存储空间 一个变量的操作 会影响所有的变量// a储存数值100 var a = 100;// 将 a 储存的数据100赋值给bvar b = a;// 将 a 储存的数值修改为北京 不影响b储存的数据a原创 2021-07-23 08:55:12 · 190 阅读 · 4 评论 -
sass 使用
文章目录sass lesssass 执行sass 文件的分类sass 文件的编译方式nodejs编译 sass````sass less 可以 编译 的 css 语言 带有变量,if语句,for循环,函数等等的 css语言sass 执行 浏览器 默认 不支持 sass 的直接执行 必须要编译转化为 原生的 css 程序 浏览器才能执行sass 文件的分类文件名.sass语法中 没有 大括号 只是靠原创 2021-07-22 09:17:17 · 260 阅读 · 2 评论 -
原生JS 爱心时钟
HTML片段:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML5爱心时钟</title></head><body style="overflow:hidden;"> <canvas id="canvas"></canvas> <script type="text/javascript"原创 2021-07-19 22:36:16 · 294 阅读 · 0 评论 -
手写 JS 日期选择器
这里以你的生日是哪一天为例HTML片段:<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="Author" content="Jiang Hongbin"><title>日期选择 - BY ziyue</title><script src="time.js"></scrip.原创 2021-07-19 22:29:16 · 250 阅读 · 1 评论 -
返回上一页的三种方法
返回上一页的三种方法:<button onClick={()=>{ {/* 方法一 */} window.history.back() {/* 方法二 */} this.props.history.goBack() {/* 方法三 直接返回几级及是负几*/} this.props.history.go(-1)}}>返回</button>...原创 2021-07-15 14:41:53 · 8834 阅读 · 0 评论 -
☛ let ☛ const ☛ var 定义变量 区别
ES6-定义变量在ES6 里面有两个新的关键字Let定义变量const定义常量(一个特殊的变量,一个不会改变的变量)使用的语法和var 是一样的1. let/const 和var的区别Let/const 和var的区别预解析var 会进行预解析。可以在定义之前使用,只不过值是udnefinedLet/const 不会进行预解析,不能在定义之前使用,会报错// 预解析console.log(num) //因为预解析,所以这里其实已经有了num 变量,只是没有赋值 所原创 2021-07-10 15:14:27 · 124 阅读 · 0 评论 -
this指向
this指向思维导图this指向问题重要!!!重要!!!重要!!!1.this是个关键字,在作用域内使用的关键字要么使用在全局作用域要么使用在私有作用域因为只有函数生成私有作用域,所以就是使用在函数内部2.this在全局作用域使用的时候表示的意义就是window, 也叫作全局一般不会在全局作用域下直接使用this//全局作用域使用thisconsole. log( this)console. log(window)console. log(window === this原创 2021-07-09 22:11:19 · 132 阅读 · 3 评论 -
原生JS 吸顶demo
/* * css 代码片段 */ *{ margin:0; padding:0; } body{ height: 5000px; } div{ width: 100%; height: 0px; font-size: 30px; color: #fff;原创 2021-07-08 21:07:57 · 182 阅读 · 0 评论 -
DOM操作 和 BOM操作
DOM操作 和 BOM操作DOM操作JavaScript 提供的 操作 html文件的方法BOM操作JavaScript 提供的 操作 浏览器的方法DOM操作之获取标签对象推荐使用方式 对于低版本IE不兼容 document.querySelector('条件'); 获取符合条件的第一个标签对象 执行结果是 一个独立的标签对象 可以直接操作这个独立的标签对象 如果没有符合条件的标签对象 结果是 null原创 2021-07-08 20:46:52 · 346 阅读 · 0 评论 -
定时器 延时器 完成 【流氓广告】 demo
for循环 一次性 执行所有的 循环次数 瞬间执行完毕 所有的 循环次数 循环到了设定的条件 循环就终止了 定时器 延时器 定时器: 按照设定的时间间隔 循环往复 执行代码程序 只要 不停止 会一直执行 语法: setIntervale( 参数1 , 参数2 ) 参数1 : 回调函数 每次时间间隔之后 执行的程序内容 .原创 2021-07-08 20:41:25 · 151 阅读 · 0 评论 -
获取时间对象数据
可以使用 JavaScript 提供的方法 获取时间对象中 存储的时间信息 1, 获取 4位 年份 时间对象.getFullYear() 2, 获取 月份 时间对象.getMonth() 结果 是 0 - 11 的数值 对应 1 - 12 的月份 实际结果是 时间对象.getMonth() + 1 3, 获取 日期 时间对象原创 2021-07-08 20:25:20 · 221 阅读 · 0 评论 -
获取时间戳
时间戳:距离 格林尼治标准时间 1970年1月1日 0点0分0秒 的时间差JavaScript中 时间差的单位是 毫秒 1秒 = 1000毫秒 时间戳一般用于计算两个时间之间的时间差 获取语法: 时间对象.getTime() // 当前时间对象 var time = new Date(); // 获取时间戳 转化为秒 // 除以 1000 取整 var t = parse原创 2021-07-08 20:14:01 · 178 阅读 · 0 评论 -
JavaScript的 内置对象 Math
Math不重要的属性和方法1, 属性Math.PI 圆周率Math.SQRT2 2的平方根 是具体的数值可以直接使用2, 方法/函数Math.pow(参数1,参数2)乘方运算 幂运算参数1 是 底数参数2 是 指数Math.abs(数值)绝对值Math.sqrt(数值)平方根 // 幂运算 // 2 的 50 次 乘方 console.log( Math.pow( 2, 50 ) ); //1125899906842624稍微重原创 2021-07-08 20:04:12 · 103 阅读 · 0 评论 -
JavaScript Array 对象
文章目录什么是数组?创建一个数组访问数组数组中包含对象元素、函数、数组:使用数组对象预定义属性和方法:Array 对象数组属性Array 对象方法查询数组中 是否存储了某一个数值【indexOf】【lastIndexOf】将数组存储的数值 按照大小顺序进行排列【sort】数组 和 字符串 的相互转化【join】【split】删除数组中指定的数据单元【splice】新增 【unshift】【push】 删除【shift】【pop】数组的反转【reverse】数组的拼接【concat】数组原创 2021-07-08 19:42:52 · 235 阅读 · 4 评论 -
gulp 自动打包压缩工具
gulp 是一款 自动 打包压缩工具按照设定的 文件 设定的 压缩规范 将文件压缩 存储在 指定的文件夹中可以做到 时时监听文件 也就是 文件内容只要改变 就会自动 打包压缩使用 gulp 必须严格按照 gulp 的语法规范执行同时 使用 第三方依赖包设定的 压缩规范基本步骤: 1, 创建项目文件 2, 下载全局 gulp 依赖包 3, 下载 开发依赖 gulp包 4, 下载 相关的 压原创 2021-07-07 01:19:58 · 970 阅读 · 0 评论 -
闭包的介绍
闭包概念本质原因:闭包的核心代码闭包的优点概念 闭包是 函数 的一种 高级应用方式 主要目的 就是 操作调用使用 函数中的数据本质原因: 为了数据的 安全性 也就是为了 防止全局变量污染 将 全局变量 定义在 函数中 称为局部变量 再 通过 闭包的语法形式 来操作调用使用 这个数据闭包的核心代码 有一个函数A 返回值是一个匿名函数 在 函数A 之外 有变量 存储函数A的执行结果 也原创 2021-07-06 22:28:23 · 97 阅读 · 0 评论 -
数据类型转换
文章目录数据类型转换-转数值1. Number()2. parseInt() 转化成整数3.parseFloat( )4.取正负值5.非加法的数学运算数据类型转换-转字符串1. String()2. toString()3.加法运算数据类型转换-转布尔1. Boolean()数据类型转换-转数值把其他数据类型转换成数值类型1. Number()语法:Number(你要转换的数据)返回值:转换好的数据特点:=> 会把你要转化的内容当作一个整体来看待=> 能转换成数字结果,就是数原创 2021-07-02 09:03:21 · 178 阅读 · 0 评论 -
运 算 符
文章目录数学运算符1. +2. -3. *4. /5. %6. **取幂赋值运算符1. =2. +=3. *=4. /=5. %=6. -=比较运算符1. >2. <3. >=4. <=5. == 等于判断 宽松判断6. === 全等判断 严格判断7. != 不等8. !== 不全等逻辑运算符1. && 逻辑与/且2. || 逻辑或3. ! 逻辑非自增自减运算符1.自增++1.自增 - -数学运算符进行数学运算的符号1. +原创 2021-07-02 09:02:46 · 225 阅读 · 0 评论 -
检测数据类型 typeof
文章目录检测数据类型关键字 typeof两种用法:两种语法的区别typeof 的返回值检测数据类型 1. 在运算过程中,有的数据不是自己写的 2. 有可能在通过运算得到的,有可能是别人给的 3. 为了保证程序的正确运行,我们需要检测数据变量关键字 typeof两种用法: 1. typeof 变量 => 语法: typeof 要检测的变量 => 返回值(结果):以字符串的形式给你变量数据类型var n1 = 100//使用 typeof 关键字 去原创 2021-07-01 15:38:46 · 359 阅读 · 0 评论 -
for 循环 终止 break 和 continue 区别
demo: for(var i = 1 ; i <= 5 ; i++){ // 执行结果是 1 2 // i 等于 3 时 之后的 console.log() 会被终止 没有 输出3 // 之后的循环 i为4 5 的循环也会被终止 没有输出 4 5 if(i === 3){ break; } console.log(i);原创 2021-07-01 10:23:13 · 402 阅读 · 0 评论