用JS实现网页验证码功能

最新推荐文章于 2022-08-05 20:15:29 发布

fgf-2021

最新推荐文章于 2022-08-05 20:15:29 发布

阅读量967

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42303695/article/details/107167861

版权

验证码

作用：验证使用网页的用户是否为机器人。
验证码一般有两种
1.纯数字组成的验证码
2.数字和字母结合的验证码

纯数字组成的验证码基本不用，因为很容易被破解

纯数字组成的验证码
首先我们编写一个函数，函数的作用是随机生成n位纯数字验证码，代码如下。

function numTestCode(n){//参数n代表我要生成n位验证码，每一位数字的范围是0-9的整数
	var arr=[];//存储生成的数字
	for(var i=0;i<n;i++){
		arr[i]=parseInt(Math.random()*10)//生成0-9之间的随机整数，并将每个随机整数存入数组arr
	}
	return arr.join("")//将数组中的各个元素拼接成一个字符串并作为函数的返回值。
}

数字和字母组合的验证码
同样编写函数，函数的作用随机生成n位数字和字母结合的验证码，代码如下。

function  testCode(n){
	var arr=[];
	for(var i=0;i<n;i++){
		var num=parseInt(Math.random()*123);//随机生成0到122里面的整数
		if(num>=0&&num<=9){//判断是否为0-9里面的整数
			arr.push(num);
		}else if(num>=97&&num<=122||num>=65&&num<=90){//判断是否为大小写字母，判断依据为ASCII码值。
			arr.push(String.fromCharCode(num));
		}
		else{//判断无效数字，则减去循环的次数。
			i--;
		}
	}
	return arr.join("");
}

html页面
完成一个简单的html页面，也可以css美化一下，这里就不去做了

<body>
	<div id="div1">
		000000
	</div>
	<button onclick="btnClick();">获取验证码</button>
</body>

如何点击获取验证码就刷新验证码呢？这里需要去写一个事件驱动函数

function btnClick(){
	var oDiv=document.getElementById("div1");//获取html页面中id为div1标签
	oDiv.innerHTML=testCode(6);//将之前写好的函数直接调用返回值赋给div1标签下
}

fgf-2021

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用JS实现网页验证码功能

验证码作用：验证使用网页的用户是否为机器人。验证码一般有两种1.纯数字组成的验证码2.数字和字母结合的验证码纯数字组成的验证码基本不用，因为很容易被破解纯数字组成的验证码首先我们编写一个函数，函数的作用是随机生成n位纯数字验证码，代码如下。function numTestCode(n){//参数n代表我要生成n位验证码，每一位数字的范围是0-9的整数 var arr=[];//存储生成的数字 for(var i=0;i<n;i++){ arr[i]=parseInt(Math
复制链接

扫一扫