JavaScript编写带旋转+线条干扰的验证码脚本实例

日期：2020-06-10 栏目：程序人生浏览：次

从我们平时上网的经验来看,验证码一般是四位,由数字和字母组成。
那么接下来楼主将带领大家一步步用JavaScript做出一个验证码脚本!
先给出成品，方便大家理解：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #securityCode{ background-color: #008000; width:70px; height:30px; font-family: '楷体', serif; font-size: 20px; color:white; } </style> <script language="JavaScript" type="text/javascript"> function createCode(){ var code=new Array(0,1,2,3,4,5,6,7,8,9, 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'); var codeNumber; securityCode="";//全局变量,方便后续验证 for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; } document.getElementById("securityCode").value=securityCode; } function verify(){ var enterCode=document.getElementById("enterCode").value; if(enterCode.toUpperCase()==securityCode){ alert("输入正确,通过验证!"); } else{ enterCode.value=""; createCode(); } } </script> <title>Jizhen Tan</title> </head> <body > <input type="text"><br/> <input type="button"> <a href="###">看不清楚</a><br/> <input type="button"value="验证"> </body> </html>

1.既然是四位验证码,我们的思路就要打开一些了,首先我们需要一个数组来储存字母和数字。

var code=new Array(0,1,2,3,4,5,6,7,8,9, 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');

2.然后我们需要让它随机显示数组中的元素，这里我们建立一个codeNumber变量来随机显示的数字,但我们需要的是四位验证码，而现在数组中的元素都是单个的，怎么办呢？简单！我们再建立一个securityCode变量来储存数组中的元素不就得了。代码如下：

var codeNumber; securityCode="";//全局变量,方便后续验证 for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; }

可以看出此时securityNumber变量储存的就是一个四位随机验证码
3.好了，经过简单的两步，我们就得到了四位验证码。我们将它放在一个createCode函数中。

function createCode(){ var code=new Array(0,1,2,3,4,5,6,7,8,9, 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'); var codeNumber; securityCode="";//全局变量,方便后续验证 for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; } document.getElementById("securityCode").value=securityCode; }

4.接下来我们创建一个验证机制：

5.小小修饰下验证码：

进阶：进一步阻止机器人的高级技巧
接触的大部分项目中，验证码一直都是后台干的事，这两天正好有一个页面需要验证码，第时间想着后台实现，但突然转念一想大部分项目貌似对安全性要求不是很高，又要求有点阻止机器人的技巧，于是就用前端写了一个验证码。并利用CSS3的transform属性里的rotate设置旋转，再随机弄点干扰线，最后为了在所有DOM节点的上边加一层opacity=0的DIV，一个前端验证码就出来了。

2016530145035420.png (392×323)

vCode代码：

用法：

//container 为验证码的DOM节点 var code = new vCode(container); // 验证是否正确 // inputCode为用户输入的验证码 code.verify(inputCode); // return true or false

您可能感兴趣的文章:

转载注明出处：https://www.heiqu.com/wzpwjw.html

JavaScript编写带旋转+线条干扰的验证码脚本实例

相关推荐