JS如何生成随机验证码


Posted in Javascript onMarch 02, 2020

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

JS如何生成随机验证码

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

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

什么是Canvas

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

思路

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

HTML

<canvas id="canvas" style="border: 1px solid red; width: 80px; height: 40px;">
</canvas>

JS

function getVerification() { //二维码
 var ctx = document.getElementById("canvas").getContext("2d");
 // 清空画布
 ctx.clearRect(0,0, 400, 400);
 // 设置字体
 ctx.font = "128px bold 黑体";
 // 设置垂直对齐方式
 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()函数代码如下,可以随机生成十六进制颜色码。

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

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

function getRandomNum(n){
 return parseInt(Math.random() * n); 
}

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>2</title>
</head>

<body>
 <canvas id="canvas" style="border: 1px solid red; width: 80px; height: 40px;"></canvas>
 <span id="yanzhengma"></span><button onclick="getVerification()">看不清</button>
 <script>
 function randomColor() {
 var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
 var colorArray = colorValue.split(",");
 var color = "#";
 for (var i = 0; i < 6; i++) {
 color += colorArray[Math.floor(Math.random() * 16)];
 }
 return color;
 }
 function getRandomNum(n){
 return parseInt(Math.random() * n); 
 }
 function getVerification() {
 var ctx = document.getElementById("canvas").getContext("2d");
 ctx.clearRect(0,0, 400, 400);
 // 设置字体
 ctx.font = "128px bold 黑体";
 // 设置垂直对齐方式
 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));
 }
 getVerification();
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
js实现烟花特效
Mar 02 #Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 #Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 #Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 #Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 #Javascript
Vue Router的手写实现方法实现
Mar 02 #Javascript
ES6中Set和Map用法实例详解
Mar 02 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
php将文本文件转换csv输出的方法
2014/12/31 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP.vs.JAVA
2016/04/29 PHP
详解PHP队列的实现
2019/03/14 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python 文件管理实例详解
2015/11/10 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python从子线程中获得返回值的方法
2019/01/30 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
详解python如何引用包package
2020/06/07 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
党员查摆剖析材料
2014/10/10 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
2022年显卡天梯图(6月更新)
2022/06/17 数码科技