JS如何生成随机验证码

 更新时间:2020年03月02日 13:49:07   转载 作者:mencre  
这篇文章主要为大家详细介绍了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 是你的高阶函数(高级应用)

    Javascript 是你的高阶函数(高级应用)

    这篇文章主要介绍了Javascript 是你的高阶函数 ,需要的朋友可以参考下
    2015-06-06
  • PHP获取当前页面完整URL的方法

    PHP获取当前页面完整URL的方法

    在大家在使用PHP编写程序的时候,我们常常想要获取当前页面的URL。下面就给大家分享了PHP获取当前页面完整URL的方法,文中还给出了如获取域名或主机地址、获取网页地址和包含端口号的完整url等的方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • javascript获取div的内容 精华篇

    javascript获取div的内容 精华篇

    用js获取div的内容的方法,其实原理就是利用innerText或innerHTML
    2009-05-05
  • JS实现一个简单的日历

    JS实现一个简单的日历

    本文主要介绍了用js实现一个日历的示例代码并解析其实现原理,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 详解微信小程序用定时器实现倒计时效果

    详解微信小程序用定时器实现倒计时效果

    这篇文章主要介绍了微信小程序用定时器实现倒计时效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript实现公告栏上下滚动效果

    JavaScript实现公告栏上下滚动效果

    这篇文章主要为大家详细介绍了JavaScript实现公告栏上下滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js操作iframe兼容各种主流浏览器示例代码

    js操作iframe兼容各种主流浏览器示例代码

    遇到了操作iframe的相关问题,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数,下面与大家分享下操作iframe兼容各种浏览器的方法
    2013-07-07
  • js+html5实现侧滑页面效果

    js+html5实现侧滑页面效果

    这篇文章主要为大家详细介绍了js+html5实现侧滑页面效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 基于JavaScript创建动态Dom

    基于JavaScript创建动态Dom

    这篇文章主要介绍了基于JavaScript创建动态Dom的相关资料,需要的朋友可以参考下
    2015-12-12
  • 微信小程序自定义组件之可清除的input组件

    微信小程序自定义组件之可清除的input组件

    最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了方便小编直接使用了可清除的input自定义组件,下面脚本之家小编给大家带来了微信小程序自定义组件之可清除的input组件,感兴趣的朋友一起看看吧
    2018-07-07

最新评论