首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 30, 2016

基础版

从我们平时上网的经验来看,验证码一般是四位,由数字和字母组成。
那么接下来楼主将带领大家一步步用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 onLoad="checkCookie()" >
   <input type="text" id="enterCode"><br/>
   <input type="button" id="securityCode"  onclick="createCode()">
   <a href="###" onclick="createCode()">看不清楚</a><br/>
   <input type="button" style="background-color: #0099FF; font-size: 20px;"value="验证" onclick="verify()">
</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.接下来我们创建一个验证机制：

function verify(){
      var enterCode=document.getElementById("enterCode").value;
      if(enterCode.toUpperCase()==securityCode){
        alert("输入正确,通过验证!");
      }
      else{
        enterCode.value="";
        createCode();
      }
    }

5.小小修饰下验证码：

<style>
    #securityCode{
      background-color: #008000;
      width:70px;
      height:30px;
      font-family: '楷体', serif;
      font-size: 20px;
      color:white;
    }
  </style>

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

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

vCode代码：

(function(){
  var randstr = function(length){
    var key = {
 
      str : [
        'a','b','c','d','e','f','g','h','i','j','k','l','m',
        'o','p','q','r','s','t','x','u','v','y','z','w','n',
        '0','1','2','3','4','5','6','7','8','9'
      ],
 
      randint : function(n,m){
        var c = m-n+1;
        var num = Math.random() * c + n;
        return Math.floor(num);
      },
 
      randStr : function(){
        var _this = this;
        var leng = _this.str.length - 1;
        var randkey = _this.randint(0, leng);
        return _this.str[randkey];
      },
 
      create : function(len){
        var _this = this;
        var l = len || 10;
        var str = '';
 
        for(var i = 0 ; i<l ; i++){
          str += _this.randStr();
        }
 
        return str;
      }
 
    };
 
    length = length ? length : 10;
 
    return key.create(length);
  };
 
  var randint = function(n,m){
    var c = m-n+1;
    var num = Math.random() * c + n;
    return Math.floor(num);
  };
 
  var vCode = function(dom, options){
    this.codeDoms = [];
    this.lineDoms = [];
    this.initOptions(options);
    this.dom = dom;
    this.init();
    this.addEvent();
    this.update();
    this.mask();
  };
 
  vCode.prototype.init = function(){
    this.dom.style.position = "relative";
    this.dom.style.overflow = "hidden";
    this.dom.style.cursor = "pointer";
    this.dom.title = "点击更换验证码";
    this.dom.style.background = this.options.bgColor;
    this.w = this.dom.clientWidth;
    this.h = this.dom.clientHeight;
    this.uW = this.w / this.options.len;
  };
 
  vCode.prototype.mask = function(){
    var dom = document.createElement("div");
    dom.style.cssText = [
      "width: 100%",
      "height: 100%",
      "left: 0",
      "top: 0",
      "position: absolute",
      "cursor: pointer",
      "z-index: 9999999"
    ].join(";");
 
    dom.title = "点击更换验证码";
 
    this.dom.appendChild(dom);
  };
 
  vCode.prototype.addEvent = function(){
    var _this = this;
    _this.dom.addEventListener("click", function(){
      _this.update.call(_this);
    });
  };
 
  vCode.prototype.initOptions = function(options){
 
    var f = function(){
      this.len = 4;
      this.fontSizeMin = 20;
      this.fontSizeMax = 48;
      this.colors = [
        "green",
        "red",
        "blue",
        "#53da33",
        "#AA0000",
        "#FFBB00"
      ];
      this.bgColor = "#FFF";
      this.fonts = [
        "Times New Roman",
        "Georgia",
        "Serif",
        "sans-serif",
        "arial",
        "tahoma",
        "Hiragino Sans GB"
      ];
      this.lines = 8;
      this.lineColors = [
        "#888888",
        "#FF7744",
        "#888800",
        "#008888"
      ];
 
      this.lineHeightMin = 1;
      this.lineHeightMax = 3;
      this.lineWidthMin = 1;
      this.lineWidthMax = 60;
    };
 
    this.options = new f();
 
    if(typeof options === "object"){
      for(i in options){
        this.options[i] = options[i];
      }
    }
  };
 
  vCode.prototype.update = function(){
    for(var i=0; i<this.codeDoms.length; i++){
      this.dom.removeChild(this.codeDoms[i]);
    }
    for(var i=0; i<this.lineDoms.length; i++){
      this.dom.removeChild(this.lineDoms[i]);
    }
    this.createCode();
    this.draw();
  };
 
  vCode.prototype.createCode = function(){
    this.code = randstr(this.options.len);
  };
 
  vCode.prototype.verify = function(code){
    return this.code === code;
  };
 
  vCode.prototype.draw = function(){
    this.codeDoms = [];
    for(var i=0; i<this.code.length; i++){
      this.codeDoms.push(this.drawCode(this.code[i], i));
    }
 
    this.drawLines();
  };
 
  vCode.prototype.drawCode = function(code, index){
    var dom = document.createElement("span");
 
    dom.style.cssText = [
      "font-size:" + randint(this.options.fontSizeMin, this.options.fontSizeMax) + "px",
      "color:" + this.options.colors[randint(0, this.options.colors.length - 1)],
      "position: absolute",
      "left:" + randint(this.uW * index, this.uW * index + this.uW - 10) + "px",
      "top:" + randint(0, this.h - 30) + "px",
      "transform:rotate(" + randint(-30, 30) + "deg)",
      "-ms-transform:rotate(" + randint(-30, 30) + "deg)",
      "-moz-transform:rotate(" + randint(-30, 30) + "deg)",
      "-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
      "-o-transform:rotate(" + randint(-30, 30) + "deg)",
      "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],
      "font-weight:" + randint(400, 900)
    ].join(";");
 
    dom.innerHTML = code;
    this.dom.appendChild(dom);
 
    return dom;
  };
 
  vCode.prototype.drawLines = function(){
    this.lineDoms = [];
    for(var i=0; i<this.options.lines; i++){
      var dom = document.createElement("div");
 
      dom.style.cssText = [
        "position: absolute",
        "opacity: " + randint(3, 8) / 10,
        "width:" + randint(this.options.lineWidthMin, this.options.lineWidthMax) + "px",
        "height:" + randint(this.options.lineHeightMin, this.options.lineHeightMax) + "px",
        "background: " + this.options.lineColors[randint(0, this.options.lineColors.length - 1)],
        "left:" + randint(0, this.w - 20) + "px",
        "top:" + randint(0, this.h) + "px",
        "transform:rotate(" + randint(-30, 30) + "deg)",
        "-ms-transform:rotate(" + randint(-30, 30) + "deg)",
        "-moz-transform:rotate(" + randint(-30, 30) + "deg)",
        "-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
        "-o-transform:rotate(" + randint(-30, 30) + "deg)",
        "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],
        "font-weight:" + randint(400, 900)
      ].join(";");
      this.dom.appendChild(dom);
 
      this.lineDoms.push(dom);
    }
  };
 
  this.vCode = vCode;
 
}).call(this);

用法：

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

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

- Author -

lizhong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
js constructor的实际作用分析
Nov 15 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Bootstrap编写导航栏和登陆框
May 30 #Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 #Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 #Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 #Javascript
BootStrap下jQuery自动完成的样式调整
May 30 #Javascript
JavaScript常用判断写法大全(推荐)
May 30 #Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 #Javascript
异步回调(1) FutureTask(3) Springboot-cli(1) 主题(1) ForkJoin(1) format(1) CompletableFuture(1) 底部导航(1) JAVA(88) 对齐打印(1)
You might like
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
MooTools 1.2介绍
2009/09/14 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
从零学习node.js之搭建http服务器（二）
2017/02/21 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python面向对象 反射原理解析
2019/08/12 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python爬虫开发之使用python爬虫库requests，urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Snapfish爱尔兰：在线照片打印和个性化照片礼品
2018/09/17 全球购物
亚马逊新加坡官方网站：Amazon.sg
2020/03/25 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
财务审计整改报告
2014/11/06 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server