JS+CSS3制作图形验证码

一个前端验证的验证码,利用JS和CSS3实现。

网站登陆或会员注册页面要求网站能防止机器人功能(需要输入验证码,从而区别是机器还是人在操作)。

今天给大家分享的是一个前端验证的验证码。利用JS和CSS3的transform属性里的rotate设置旋转进行制作。

js+CSS3制作图形验证码

HTML页面代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分享:js+CSS3制作图形验证码|www.xin126.cn</title>
    <script src="vCode.js"></script>
    <script>
        onload = function () {
            var container1 = document.getElementById("vCode1");
            var code1 = new vCode(container1);
            document.getElementById("btn1").addEventListener("click", function () {
                alert(code1.verify(document.getElementById("code1").value));
            }, false);
            var container2 = document.getElementById("vCode2");
            var code2 = new vCode(container2, {
                len: 5,
                bgColor: "#444444",
                colors: [
                    "#DDDDDD",
                    "#DDFF77",
                    "#77DDFF",
                    "#99BBFF",
                    //"#7700BB",
                    "#EEEE00"
                ]
            });
            document.getElementById("btn2").addEventListener("click", function () {
                alert(code2.verify(document.getElementById("code2").value));
            }, false);
        };
    </script>
</head>
<body>
<div>
    <h1>验证码1</h1>
    <input type="text" id="code1"/>
    <div id="vCode1" style="width:100px; height: 30px; border: 1px solid #ccc; display: inline-block;"></div>
    <button id="btn1">验证</button>
</div>
<div style="margin-top: 50px;">
    <h1>验证码2</h1>
    <input type="text" id="code2"/>
    <div id="vCode2" style="width:100px; height: 30px; border: 1px solid #ccc; display: inline-block;"></div>
    <button id="btn2">验证</button>
</div>
</body>
</html>

JS代码:

(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);

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/11181.html

(0)
江山如画的头像江山如画管理团队
上一篇 2022年12月1日 下午1:48
下一篇 2022年12月1日 下午1:57

99%的人还看了以下文章

  • 上机三 Java Web应用程序设计

    建议学时:8 2学时 一、编写JSP页面date.jsp,格式化显示系统当前时间 需要使用Date类和SimpleDateFormat类。 在头部引入。 <%@ page import=”java.util.Date”%> <%@ page import=”java.text.SimpleDateFormat”%> SimpleDat…

    2018年9月11日
    9.8K1
  • Python数据分析入门实战一:统计分析用户学习数据

    Python数据分析要求: 使用 Python 基础知识分析用户学习数据 json 文件,并从文件中统计出中指定的数据项。 用户学习数据 json 文件下载: http://labfile.oss.aliyuncs.com/courses/764/user_study.json user_study.json 文件部分内容展示如下: {“minutes”: …

    2022年2月5日
    1.6K0
  • python 初学者练手上机实操五-循环语句练习

    一、题目:定义一个名称为numList的列表[1,5,9,8,12,43],使用for循环 遍历该列表,输出包含的元素 1、新建一个“for.py”文件。 2、编写程序。 3、调试程序。 4、排除错误。 二、、题目:定义一个名称为numTuple的元级(1,5,9,8,12,43),使用for循环 遍历该元组,输出包含的元素 三、分别使用for循环和whil…

    2023年5月26日
    5531
  • pycharm 中 plt.imshow(img)图片不显示的解决方法(附案例)

    #%matplotlib inline # 使用%matplotlib命令可以将matplotlib的图表直接嵌入到Notebook之中,或者使用指定的界面库显示图表,它有一个参数指定matplotlib图表的显示方式。inline表示将图表嵌入到Notebook中。 # Python提供了许多魔法命令,使得在IPython环境中的操作更加得心应手。魔法命令…

    2023年1月13日
    1.7K0
  • 第三课:第一个maven项目Hello Maven

    一、Maven的简单使用 1.1、Maven项目的目录约定 MavenProjectRoot(项目根目录)|—-src|     |—-main|     |         |—-java ——存放项目的.java文件|     |         |—-resources ——存放项目资源文件,如sprin…

    2023年1月27日 编程开发
    3580
  • 快来围观!微信小程序开发需要前期准备的信息整理出来了

    一、域名以及服务器 注册一个域名,域名必须进行ssl证书配置 域名进行备案 准备服务器可选择自主搭建机房,也可选择云服务器 二、注册微信小程序 1.在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的“立即注册”按钮。 2.登陆微信公众平台https://mp.weixin.qq.com/ 点击注册->注册小程序 3.依次按照官方提示填写注…

    2022年9月19日 编程开发
    5350

发表回复

登录后才能评论