常用的函数
一、Math
数学函数：但是它不是一个函数，它是一个对象，对象中存储了还能多操作数字的属性方法，因此被称之为数学函数
console.log(typeof Math); // =>object
console.dir(Math);
/**
* Math{
* PI:3.141592653589793
* abs:function(){[native code]}
* ceil:function(){[native code]}
* }
*
* Math.abs();
* Math.PI
*/
Math中常用的属性和方法
- Math.abs([number value])
获取绝对值(绝对值永远是 正数 或者 零)
console.log(Math.abs(12.5));// =>12.5
console.log(Math.abs(12));// =>12
console.log(Math.abs(0))// =>0
// 传递的不是数字类型的值;先基于Number()转换为数字再做处理
console.log(Math.log('-1'));// =>1
console.log(Math.abs('-1px'));// =>NaN
console.log(Math.abs(true));// =>1
2.Math.ceil/floor([number value])
把一个数向上取整 / 向下取整
console.log(Math.ceil(12));// =>12
console.log(Math.ceil(12.1));// => 13
console.log(Math.ceil(12.9));// => 13
console.log(Math.ceil(-12.1));// =>-12
console.log(Math.ceil(-12.9));// =>-12
console.log(Math.floor(12));// =>12
console.log(Math.floor(12.1));// => 12
console.log(Math.floor(12.9));// => 12
console.log(Math.floor(-12.1));// =>-13
console.log(Math.floor(-12.9));// =>-13
3.Math.round([number value])
四舍五入
console.log(Math.round(12)); //=>12
console.log(Math.round(12.1));// =>12
console.log(Math.round(12.5));// =>13 正数中，5属于入
console.log(Math.round(12.9));// =>13
console.log(Math.round(-12.1));// =>-12
console.log(Math.round(-12.5));// =>-12 负数中.5属于舍
console.log(Math.round(-12.9));// =>-13
4.Math.max / min([va1],[val2],…)
获取一堆数中的最大值 / 最小值
console.log(Math.max(12, 5, 68, 23, 45, 3, 27));// =>68
console.log(Math.min(12, 5, 68, 23, 45, 3, 27));// =>3
//思考题？ 如何基于Math.max/min获取数组中的最大值最小值？
Math.max([12, 5, 68, 23, 45, 3, 27])// =>NaN 此处是只传第一个值，是个数组，和内置的语法要求不符
5.Math.sqrt / pow()
sqrt: 给一个数字开平方
pow: 计算一个数的多少次幂
console.log(Math.sqrt(9));// =>3 符合N*N=M 这样的M才能整开平方
console.log(Math.sqrt(-9));// =>NaN 负数开不了平方
console.log(Math.pow(2,10));// =>1024
6.Math.random()
获取0~1之间的随机小数
for(let i=1;i<=10;i++){
console.log(Math.random());
}
/**
* 0.4852801450686888
* 0.4050940185792915
* 0.9247441250834514
* 0.23147221668066398
* ...
*/
扩展：获取[n-m]之间的随机整数
包含n也包含m
n<m
Math.round(Math.random()*(m-n)+n)
// 25~30的随机数
for(let i=1;i<=10;i++){
let ran = Math.round(Math.random()*(30-25)+25);
console.log(ran);
}
二、数组
数组是对象数据类型的，是特殊的对象
let ary = [12,23,34,45];
console.log(typeof ary);// =>object
console.dir(ary);
/**
*
* ary = {
* 0:12,
* 1:23,
* 2:34,
* 3:45,
* length:4
* }
* 数组作为索引(key 属性名)
* length代表长度
*
* ary[0] 根据索引获取指定项的内容
* ary.length 获取数组的长度
*
* ary[length-1] 后去最后一项
*
*/
数组中的常用方法
- 方法的作用和含义
- 方法的实参(类型和含义)
- 方法的返回值
- 原来的数组是否会发生改变
1.实现数组增删改的方法
这一部分方法都会修改原有的数组
push
/* push: 向数组末尾增加内容
* @params
* 多个任意类型
* @return
* 新增后数组的长度
*/
let ary = [10, 20];
console.log(res, ary);
// 基于原生js操作键值对的方法，也可以像数组末尾增加内容
ary[ary.length] = 40;
let res = ary.push(30, "AA");// =>4 [10,20,40,"AA",40];
unshift
/* unshift: 向数组开始位置增加内容
* @params
* 多个任意类型
* @return
* 新增后数组的长度
*/
let ary = [10, 20];
let res = ary.unshift(30, "AA");
console.log(res, ary);// =>4 [30,"AA",10,20]
// 基于原生ES6展开运算符，把原有的ary克隆一氛，再新的数组创建第一项，其余的内容使用原始ary中的信息即可，也算实现了向开始增加的效果
ary = [100,...ary];
console.log(ary);// =>[100,30,"AA",10,20]
shift
/* shift: 删除数组中的第一项
* @params
* @return
* 删除的那一项
*/
let ary = [10, 20, 30, 40];
let res = ary.shift();
console.log(res, ary);// =>10 , [20,30,40]
// 基于原生的js中的delete，把数组当作普通对象，确实可以删除掉某一项内容，但是不好影响数组本身的结构特点(length长度不好跟着改变)，真实项目中杜绝这样的删除使用
delete ary[0];
console.log(ary)// =>[0:30, 1:40, length:3]
pop
/* pop: 删除数组中的最后一项
* @params
* @return
* 删除的那一项
*/
let ary = [10, 20, 30, 40];
let res = ary.pop();
console.log(res, ary);// =>40 , [10, 20, 30]
// 基于原生js让数组长度干掉一位，默认干掉的就是最后一项
ary.length--;// ary.lenth = ary.length-1;
console.log(ary);
splice
/* splice: 实现数组的增加、删除、修改
* @params
* n,m 都是数字 从索引n开始删除m个元素
* @return
* 把删除的不发用新数组存储起来
*/
let ary = [10, 20, 30, 40, 50, 60, 70, 80, 90];
let res = ary.splice(2, 4);
console.log(res, ary);//[30,40,50,60] [10,20,70,80,90]
// 基于这种方式可以清空一个数组，把原始数组中的内容以新数组存储起来(有点类似数组的克隆，把原来的数组克隆一份一模一样的给新数组)
/* res = ary.splice(0);
console.log(res, ary);// =>[10,20,70,80,90] []*/
//删除最后一项和第一项
ary.splice(ary.length - 1, 1);
ary.splice(0, 1);
console.log(ary);
/* splice: 实现数组的增加、修改
* @params
* n,m,x 从索引n开始删除m个元素,用x占用删除的部分
* n,0,x 从索引n开始，一个都不闪，把x放到索引n的前面
* @return
* 把删除的部分用新数组存储起来
*/
let ary = [10, 20, 30, 40, 50];
let res = ary.splice(2, 4, "张三", "李四");
console.log(res, ary);//[20,30] [10,"张三","李四",40,50]
// 实现增加
ary.splice(3, 0, "呵呵呵");
console.log(ary); // =>[10,"张三","李四","呵呵呵",40,50]
// 向数组末尾增加
ary.splice(ary.length, 0, "咳咳");
// 向数组开始最佳
ary.splice(0, 0, "777");
2.数组的查询和拼接
此组学习的方法，原来数组不会改变
slice
/* slice: 实现数组的查询
* @params
* n,m 都是数字 从索引n开始，找到索引为m的地方(不包含m项)
* @return
* 把找到的内容以新数组的形式返回
*/
let ary = [10, 20, 30, 40, 50];
let res = ary.slice(1, 3);
console.log(res);//[20, 30]
// m不写找到末尾
res = ary.slice(1);
console.log("m不写的时候：" + res); // =>[20,30,40,50]
// 数组的克隆,参数0不写也可以
res = ary.slice(0);
console.log("参数为0的(不写)：" + res); // =>[10,20,30,40,50]
// 如果是负数的话，slic会从末尾开始找(splice同理 )最后一个的索引是-1
res = ary.slice(-3);
console.log("负数的时候：" + res); // =>[30,40,50]
// 如果是小数会通过Math.floor()向下取整再查找
res = ary.slice(1.8, 3.1);
console.log("小数的时候：" + res);// [20,30]
// 如果是非有效数字,slice会通过Number()方法尝试转换为数字，如果是NaN会赋值为0
res = ary.slice(NaN, 1);
console.log("非有效数字：" + res);// =>[10, 20, 30, 40, 50]
// 如果m>n 会返回一个空数组
res = ary.slice(3, 1);
console.log("如果m > n:" + res);// =>[]
/*
*如果m或n的值比索引大
*m比索引大时:会找出n开始后面所有的值
*n比索引大的时:会返回空数组
*/
res = ary.slice(1,19);
console.log("m比索引大时:" + res);// =>[20,30,40,50]
res = ary.slice(10,11);
console.log("n比索引大的时:" + res);// =>[]
// 思考：1.如果n/m为负数会咋地，如果m>n了会咋地，如果是小数会咋地，如果是非有效数字会咋地，如果m或着n的值比最大索引大会咋地？2.这种克隆方式是浅克隆，可以看看深克隆
concat
/* concat: 实现数组拼接
* @params
* 多个任意类型
* @return
* 拼接后的新数组(原来数组时不变的)
*/
let ary1 = [10, 20, 30];
let ary2 = [40, 50, 60];
let res = ary1.concat("张三",ary2);
console.log(res);//[10, 20, 30, "张三", 40, 50, 60]
3.把数组转换为字符串
原来数组不变
toString
/* toString: 把数组转换为字符串
* @params
* @return
* 转换后的字符串(原来的数组不变)
*/
let ary1 = [10, 20, 30];
let res = ary1.toString();
console.log(res);//=>"10,20,30"
console.log([].toString());
console.log([12].toString());//=>"12"
join
/* join: 把数组转换为字符串
* @params
* 指定的分隔符(字符串格式)
* @return
* 转换后的字符串(原来的数组不变)
*/
let ary1 = [10, 20, 30];
let res = ary1.join('');
console.log(res);//=>"102030"
res = ary1.join()
console.log(res);// =>"10,20,30"
res = ary1.join('|')
console.log(res);// =>"10|20|30"
res = ary.join("+");
console.log(res); // =>"10+20+30"
console.log(eval(res));// =>60 eval把字符串变为js表达式
4.检测数组中是否包含某一项
indexOf/lastIndexOf
/* indexOf/lastIndexOf: 检测当前项再数组中第一次或者最后一次出现位置的索引值(再ie6~8中兼容)
* @params
* 要检测的这一项内容
* @return
* 这一项出现的位置索引值(数字)，如果数组中没有这一项，返回的结果是-1(原来数组不变)
*/
let ary = [10, 20, 30, 10, 20, 30];
console.log(ary.indexOf(20));// => 1
console.log(ary.lastIndexOf(20));// =>4
// 验证ary中是否包含"张三"
if(ary.indexOf("张三") === -1){
// 不包含
}
// 也可以直接使用es6新提供的includes方法判断
if(ary.includes("张三")){
// 包含：如果存在，返回true
}
5.排序或者排列
reverse
/* reverse: 把数组倒过来排序
* @params
* @return
* 排序后的新数组
* 原来数组改变
*/
let ary = [12, 15, 9, 28, 10, 22];
ary.reverse();
console.log(ary);
sort
/* sort: 实现数组的排序
* @params
* 可以没有，也可以是个函数
* @return
* 排序后的新数组
* 原来数组改变
*/
let ary = [7, 8, 5, 2, 4, 6, 9];
ary.sort();
console.log(ary);// =>[2, 4, 5, 6, 7, 8, 9]
// sort方法如果不传入参数，是无法处理10以上的数字排序(它默认按照每一项第一个字符来排，不是我们想要的效果)
/* ary = [12,15,9,28,10,22];
ary.sort();
console.log(ary);// =>[10, 12, 15, 22, 28, 9] */
// 想要实现多维数正常排序，需要给sort传递一个函数，函数中返回 a-b 实现升序，返回 b-a 实现降序(为啥？需要先了解冒泡排序的机制)
ary = [12, 15, 9, 28, 10, 22];
// a,b是相邻的两项
ary.sort((a, b) => a - b );
console.log(ary);// =>[10, 12, 15, 22, 28, 9]
6.遍历数组中每一项的方法
forEach
/*
*
* forEach: 遍历数组中的每一项内容
* @params
* 回调函数
* @return
*
* 原来数组不变
*/
/* let ary = [12, 15, 9, 28, 10, 22];
// 基于原生js中的循环实现
for (let i = 0; i < ary.length; i++) {
// i: 当前循环这一项的索引
// ary[i]:根据索引获取循环的这一项
console.log("索引:" + i + " 内容:" + ary[i]);
} */
ary.forEach((item, index) => {
// 数组中有多少项，函数就会被默认执行多少次
// 每一次执行函数: item是当前要操作的这一项，index是当前项的索引
console.log('索引:' + index + " 内容:" + item);
})
map
filter
reduce
find
reduce
some
ever
...
数组去重
方案一
let ary = [1, 2, 3, 4, 5, 1, 2, 3, 4];
/**
* 方案一：
* 循环原有数组的每一项，每拿到一项都往新数组中添加
* 添加之前验证新数组中是否包含该项
*/
let newAry = [];
for (let i = 0; i < ary.length; i++) {
let item = ary[i];
if(newAry.includes(item)){
// 存在这一项，不在增加到新数组中，继续下一轮循环
continue;
}
// 新数组中不存在这一项，我们加入到新数组中即可
newAry.push(item);
}
console.log(newAry);
let ary = [1, 2, 3, 4, 5, 1, 2, 3, 4];
// 简化代码
let newAry = [];
ary.forEach(item => {
if (newAry.includes(item)) return;
newAry.push(item);
});
console.log(newAry);
方案二
/**
* 方案二：
* 先分别拿出数组中的每一项A
* 用这一项和“它后面的每项”一次进行比较，如果遇到和当前项A相同的，则在原来数组中把这一项移除掉
*
* 不用includes/indexOf(这样保证兼容性)
*/
let ary = [1, 2, 3, 1, 2, 1, 2, 3, 2, 1, 2, 3]
for (var i = 0; i < ary.length; i++) {
// item:每次循环拿出来的当前项
// i:当前项 i+1:代表后一项
var item = ary[i];
// 当前项和后面的每一项 进行比较
for (var j = i + 1; j < ary.length; j++) {
// compare: item后面的每一项
var compare = ary[j];
// 如果compare和item相等，说明这一项是重复的，我们把它干掉
if (item === compare) {
// j索引这一项要从数组中移除
ary.splice(j, 1);
// 数组塌陷了：j后面的每一项索引提前了一位，下一次要比较的应该还是j这个索引的内容
j--;
}
}
}
方案三
/**
* 方案三
*/
let ary = [1, 2, 3, 1, 2, 1, 2, 3, 2, 1, 2, 3, "1"];
// 1.创建一个空对象
let obj = {};
// 2.循环数组中的每一项，把每一项向对象中进行存储 => item:item
for (let i = 0; i < ary.length; i++) {
let item = ary[i];
// 3.每存储一次之前进行判断：验证obj中是否存在这一项
if (obj[item] !== undefined) {
// 已经存在这一项
ary.splice(i, 1);
i--;
continue;
}
obj[item] = item;
}
console.log(ary);s
方案4(相对上面的方法最优)
// 基于splice实现删除性能不好：当前项被删除后，后面每一项的索引都要向前提一位，如果后面的项较多，性能的开销大
/**
* unique: 实现数组去重的方法
* @params
* ary[Array]要去重的数组
* @return
* [Array]去重后的数组
* by KeZi on 20191209
*
*/
function unique(ary) {
let obj = {};
for (let i = 0; i < ary; i++) {
let item = ary[i];
if (obj[item] !== undefined) {
ary[i] = ary[ary.length - 1];
ary.length--;
i--;
continue;
}
obj[item] = item;
}
return ary;
}
方法五(基于正则)
let ary = [1, 2, 3, 4, 5, 1, 2, 3, 4, 1];
ary.sort((a, b) => a - b);
let str = ary.join("@") + "@";
let reg = /(\d+@)\1+/g;
ary = [];
console.log(str.match(reg));
str.replace(reg, (n, m) => {
m = Number(m.slice(0, m.length - 1));
ary.push(m);
})
console.log(ary);
方法六(基于es6)
// 基于es6的Set(对应的Map)实现去重
let ary = [1, 2, 3, 4, 5, 1, 2, 3, 4];
ary = [...new Set(ary)];
console.log(ary);
字符串中常用的方法
所有用 单引号、双引号、反引号 包起来的都是字符串
let str = "kezizuishuai";
// 每一个字符串都是由零到多个字符组成的
str.length // =>字符串长度
str[0] // =>获取索引为零(第一个)字符
str[str.length-1] // =>获取最后一个字符 str.length-1最后一项索引
str[100000] // =>undefined 不存在这个索引
for(let i = 0; i<str.length; i++){
let char = str[i];
console.log(char);
}
charAt / charCodeAt
/**
* charAt: 根据索引获取指定位置的字符
* charCodeAt: 获取指定字符的ASCII的码值(Unicode编码值)
* @params
* n[number] 根据字符指定的索引
* @return
* 返回查找的字符
* 找不到返回的是空字符串不是undefined，或者对应的编码值
*/
let str = "kezizuishuai";
console.log(str.charAt(0));// =>'k'
console.log(str[0]);// =>'k'
console.log(str.charAt(100000));// =>''
console.log(str[10000000]);// =>undefined
console.log(str.charCodeAt(0)); // =>107
console.log(String.fromCharCode(107));// =>"z"
substr / substring / slice
/**
* 都是为了实现字符串的截取(在原来字符串中查找自己想要的)
* substr(n,m): 从索引n开始截取m个字符，m不写截取到末尾 (后面方法也是)
* substring(n,m): 从索引n开始找到所有m处(不含m)
* slice(n,m): 和substring一样，都是找到索引m处，但是slice可以支持负数作为索引，其余两个方法是不可以的
*/
let str = 'kezizuishuai';
console.log(str.substr(3, 7));// =>'izuishu'
console.log(str.substring(3, 7));// =>'izui'
console.log(str.substr(3));// =>'izuishuai'截取到末尾
console.log(str.substring(3, 10000));// =>'izuishuai'截取到末尾(超过索引的也只截取到末尾)
console.log(str.substring(3, 7));// =>"izui"
console.log(str.slice(3, 7));// =>"izui"
console.log(str.substring(-7, -3));// =>"" substring不支持负数索引
console.log(str.slice(-7, -3));// =>"uish" slice支持负数索引 快捷查找：负数索引，我们可以按照 str.length+负数索引的方法找 =>slice(12-7,12-3) => slice(5,9);
indexOf / lastIndexOf
/**
* 验证字符是否存在
* indexOf(x,y): 验证x第一次出现位置的索引，y是控制查找的起始位置索引
* lastIndexOf(x)
* =>没有字这个字符串，返回的结果是-1
*/
let str = 'kezizuishuai';
console.log(str.indexOf('i'));// =>3
console.log(str.lastIndexOf('i'));// =>11
console.log(str.indexOf('@'));// =>-1 不存在返回-1
if (str.indexOf("@") === -1) {
// 字符串中不包含@这个字符
}
console.log(str.indexOf("zi"));// =>2 验证整体第一次出现的位置，返回的索引是第一个字符所在的索引值
console.log(str.indexOf("didi"));// =>-1
console.log(str.indexOf("i",7));// =>11 查找字符串索引7及之后的字符串中，n第一次出现的位置索引
if (!str.includes('@')) {
console.log("字符串中不包含@");
}
toUpperCase / toLowerCase
/**
* 字符串中字母的大小写转换
* toUpperCase():转大写
* toLowerCase():转小写
*/
let str = "Kezizuishuai";
str = str.toUpperCase();
console.log(str);// =>"KEZIZUISHUAI"
str = str.toLowerCase();
console.log(str);// =>"kezizuishuai"
// 实现首字母大写 其他字母小写
str = str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
console.log(str);
split
/**
*
* split([分隔符]): 把字符串按照指定的分隔符拆分成数组(和数组中的join相对应)
*
* split支持传递正则表达式
*/
let str = "music|movie|eat|sport";
let ary = str.split('|');// =>["music", "movie", "eat", "sport"]
str = ary.join(",");
console.log(str);// =>"music,movie,eat,sport"
replace
/**
* replace(老字符,新字符): 实现字符串的替换(经常伴随着正则而用)
*
*/
let str = "壳子@最帅@天下@无敌";
str = str.replace("@", "-");
console.log(str);//=>"壳子-最帅@天下@无敌" 在不适用正则表达式的情况下，执行一次replace只能替换一个字符
str = str.replace(/@/g,"-");
console.log(str); // =>壳子-最帅-天下-无敌
match
localCompare
trim / trimLeft / trimRight
...
控制台输入：String.prototype产看所有字符串提供的方法
实现时间字符串转换需求
// let time = '2019-7-24 12:6:23';
// => 变为自己需要呈现的格式，例如
// "2019年07月24日 12时06分23秒"
// "2019年07月24日"
// "07/24 12:06"
// ...
// 方案一: 一路replace
/* time = time.replace("-","年").replace("-","月").replace(" ","日 ").replace(":","时").replace(":","分") + "秒";
console.log(time);// =>2019年7月24日 12时6分23秒 */
// 不足两位的 在前面加0
/* let addZero = val => {
if (val.length < 2) {
val = "0" + val;
}
return val;
}; */
let addZero = val => val.length < 2 ? val = "0" + val : val;
// 方案二:获取到年月日小时分钟秒这几个值后，最后想拼成什么效果就拼成什么
let time = '2019-7-24 12:6:23';
let ary = time.split(/(?: |-|:)/g);// =>["2019", "7", "24", "12", "6", "23"] ?:的意思是 非获取匹配
time = ary[0] + "年" + addZero(ary[1]) + "月" + addZero(ary[2]) + "日";
console.log(time);
// 获取值的方法：基于split一项项的拆分
/* let n = time.split(" "); // =>["2019-7-24","12:6:23"]
let m = n[0].split("-"); // =>["2019", "7", "24"]
let x = n[1].split(":"); // =>["12","6","23"] */
//获取值的方法：基于indexOf获取指定字符索引，基于substring一点点截
/* let n = time.indexOf("-");
let m = time.lastIndexOf("-");
let x = time.indexOf(" ");
let y = time.indexOf(":");
let z = time.lastIndexOf(":");
let year = time.substring(0, n);
let month = time.substring(n + 1, m);
let day = time.substring(m + 1, x);
console.log(year, month, day) */
实现一个方法queryURLParameter 获取一个url地址问好后面传递的参数信息
// let url = "http://www.zhufengpeixun.cn/index.html?lx=1&name=zhufeng&teacher=aaa#box";
/**
* 结果:{
* lx:1,
* name:'zhufeng',
* teacher:'aaa',
* HASH:'box'
* }
*
*
*/
// 1.获取问号后面的值
/* let askIndex = url.indexOf("?");
let wellIndex = url.indexOf("#");
let askText = url.substring(askIndex + 1, wellIndex);
let wellText = url.substring(wellIndex + 1);
// askText = "lx=1&name=zhufeng&teacher=aaa"
// wellText = "box"
// 2.问号后面值的详细处理
let result = {};
let askAry = askText.split("&");
// askAry = ["lx=1", "name=zhufeng", "teacher=aaa"];
askAry.forEach(item => {
// item: 当前从数组中循环的这一项
let n = item.split("=");
let key = n[0];
let value = n[1];
result[key] = value;
});
result['HASH'] = wellText;
console.log(result) */
/**
* queryURLParams: 获取url地址中 问号传参的信息和哈希(hash)值
* @params
* url[string] 要解析的url字符串
* @return
* [object] 包含参数和哈希值信息的对象
* by kezi on 2019/12/10 10:45:00
*/
function queryURLParams(url) {
// 获取?和#后面的信息
let askIn = url.indexOf("?"),
wellIn = url.indexOf("#"),
askText = "",
wellText = "";
// #不存在
wellIn === -1 ? wellIn = url.length : null;
// ?存在
askIn >= 0 ? askText = url.substring(askIn + 1, wellIn) : null;
wellText = url.substring(wellIn + 1);
// 2.获取每一份的信息
let result = {};
wellText !== "" ? result['HASH'] = wellText : null;
if (askText !== "") {
let ary = askText.split("&");
ary.forEach(item => {
let itemAry = item.split("=");
result[itemAry[0]] = itemAry[1];
})
}
return result;
}
// 用正则封装
let queryURLParams2 = url => {
let result = {},
reg1 = /([^?#&]+)=([^?#&]+)/g,
reg2 = /#(.+)/g;
url.replace(reg1, (x, y, n) => result[y] = n);
url.replace(reg2, (x, y) => result["HASH"] = y);
return result;
};
let url = "http://www.zhufengpeixun.cn/index.html?lx=1&name=zhufeng&teacher=aaa#box";
let paramsObj = queryURLParams2(url);
console.log(paramsObj);
实现一个最LOW的验证码：数字+字母共四位
验证码目的：防止外挂程序恶意批量注入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>史上最LOW的验证码</title>
</head>
<body>
<input type="text" id="codeInp">
<br>
<span id="codeBox"></span>
<button id="changeCode">看不清楚换一张</button>
<!-- IMPORT JS -->
<script>
let codeInp = document.getElementById("codeInp"),
codeBox = document.getElementById("codeBox"),
changeCode = document.getElementById("changeCode");
/**
*queryCode:获取到四位随机的验证码,然后放到指定的盒子中
* @params
* @return
* by kezi on 2019/12/10
*/
function queryCode() {
let area = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789";
let result = "";
for (let i = 0; i < 4; i++) {
// 每次循环都获取一个随机索引的数字索引
let ran = Math.round(Math.random() * 61);
// 在根据获取的索引从范围字符串中找到对应的字符,把找到的字符拼接到最后的结果中
result += area.charAt(ran);
}
// 放到盒子里
codeBox.innerHTML = result;
}
// 第一次加载页面需要执行方法,让其显示在页面中
queryCode();
// 点击看不清按钮,需要执行方法生成新的验证码
changeCode.onclick = queryCode;
// 文本框失去焦点的时候: 验证用户输入的内容和验证码是否相同,给予相关的提示,如果不一样需要重新生成验证码
// onblur: 文本框失去焦点事件
codeInp.onblur = function(){
// 获取用户和验证码内容(表单元素.value / 非表单元素.innerHTML 获取内容)
let val = codeInp.value,
code = codeBox.innerHTML;
// 不区分大小写的验证(都转成小写)
if(val.toLowerCase() === code.toLowerCase()){
alert("温馨提示：输入成功！");
}else{
alert("温馨提示：验证码输入有误，请重试");
codeInp.value = "";
// 重新生成验证码
queryCode();
}
}
</script>
</body>
</html>