微客导航 » 文章资讯 » JS如何生成随机验证码

JS如何生成随机验证码

2023-07-29 22:36:04 298

本文实例为大家分享了JS生成随机验证码的具体代码，供大家参考，具体内容如下

在网站中我们很常见到形形色色的验证码，今天我们来用JS来生成一个随机的二维码。

我们需要用到canvas来进行验证码的绘制

什么是Canvas

HTML5的canvas元素使用JavaScript在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

思路

我们要做的二维码首先要有随机的数字，其次就是要有随机的位置。

HTML

functiongetVerification(){//二维码
varctx=document.getElementById("canvas").getContext("2d");
//清空画布
ctx.clearRect(0,0,400,400);
//设置字体
ctx.font="128pxbold黑体";
//设置垂直对齐方式
ctx.textBaseline="top";
//设置颜色
ctx.fillStyle=randomColor();
//绘制文字（参数：要写的字，x坐标，y坐标）
ctx.fillText(getRandomNum(10),0,getRandomNum(50));
ctx.fillStyle=randomColor();
ctx.fillText(getRandomNum(10),50,getRandomNum(50));
ctx.fillStyle=randomColor();
ctx.fillText(getRandomNum(10),100,getRandomNum(50));
ctx.fillStyle=randomColor();
ctx.fillText(getRandomNum(10),150,getRandomNum(50));
}

我们使用ctx.fillStyle=randomColor();来设置随机的颜色，每写一个数字换一个颜色，randomColoe()函数代码如下，可以随机生成十六进制颜色码。

functionrandomColor(){
varcolorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
varcolorArray=colorValue.split(",");
varcolor="#";
for(vari=0;i<6;i++){
color+=colorArray[Math.floor(Math.random()*16)];
}
returncolor;
}

我们使用getRandomNum()来获取随机显示的数字和随机每次字体的y轴方向的位置。验证码的每个数字分别进行获取。传入的参数n来确定随机数范围。代码如下：

functiongetRandomNum(n){
returnparseInt(Math.random()*n);
}

完整代码：






2




看不清

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS如何生成随机验证码

热门推荐

随机推荐