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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jquery 使用简明教程
Mar 05 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
做个自己站内搜索引擎
2006/10/09 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python基础教程之udp端口扫描
2014/02/10 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python编程线性回归代码示例
2017/12/07 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
numpy.array 操作使用简单总结
2019/11/08 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python流程控制常用工具详解
2020/02/24 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
内业资料员岗位职责
2014/01/04 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
给老婆的道歉信
2015/01/20 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书