smartClient 验证码

来源：互联网发布：网络好听的名字编辑：程序博客网时间：2024/06/03 17:36

smartClient实现验证码，效果图如下

具体代码如下：

isc.ClassFactory.defineClass("M3Vcode", "Canvas");isc.M3Vcode.addProperties({width: this.width,height: this.height,options: this.options, //参数，设置验证码的背景色，和字体颜色等initWidget: function() {this.Super("initWidget", arguments);var it = this;this.codeDoms = [];        this.lineDoms = [];this.initOptions(this.options);},initOptions: function(options){        var f = function(){            this.len = 4;            this.fontSizeMin = 20;            this.fontSizeMax = 30;            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];            }        }    },initVcode: function(){this.dom = document.getElementById(this.getCanvasName() + '_Vcode');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;this.update();        this.mask();},getInnerHTML: function() {var html = '<div id="' + this.getCanvasName() + '_Vcode" style="background-color: red;"></div>';return html;},draw: function() {if (!this.readyToDraw()) return this;this.Super("draw", arguments);var it = this;var temp = document.getElementById(this.getCanvasName() + '_Vcode');temp.style.width = this.width+"px";temp.style.height = this.height+"px";it.initVcode();},resized: function() {if (this.isDraw) this.markForRedraw()},markForRedraw: function() {var it = this;it.dom.dispose();var temp = document.getElementById(this.getCanvasName() + '_Vcode');temp.style.width = this.width+"px";temp.style.height = this.height+"px";it.initVcode();},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);    },click: function(){this.update();},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.drawImg();    },drawImg: function(){        this.codeDoms = [];        for(var i=0; i<this.code.length; i++){            this.codeDoms.push(this.drawCode(this.code[i], i));        }         this.drawLines();    },drawCode: function(code, index){        var dom = document.createElement("span");         dom.style.cssText = [            "font-size:" + this.randint(this.options.fontSizeMin, this.options.fontSizeMax) + "px",            "color:" + this.options.colors[this.randint(0,  this.options.colors.length - 1)],            "position: absolute",            "left:" + this.randint(this.uW * index, this.uW * index + this.uW - 10) + "px",            "top:" + this.randint(this.h - 35, this.h - 25) + "px",            "transform:rotate(" + this.randint(-30, 30) + "deg)",            "-ms-transform:rotate(" + this.randint(-30, 30) + "deg)",            "-moz-transform:rotate(" + this.randint(-30, 30) + "deg)",            "-webkit-transform:rotate(" + this.randint(-30, 30) + "deg)",            "-o-transform:rotate(" + this.randint(-30, 30) + "deg)",            "font-family:" + this.options.fonts[this.randint(0, this.options.fonts.length - 1)],            "font-weight:" + this.randint(400, 900)        ].join(";");         dom.innerHTML = code;        this.dom.appendChild(dom);         return dom;    },drawLines: function(){        this.lineDoms = [];        for(var i=0; i<this.options.lines; i++){            var dom = document.createElement("div");             dom.style.cssText = [                "position: absolute",                "opacity: " + this.randint(3, 8) / 10,                "width:" + this.randint(this.options.lineWidthMin, this.options.lineWidthMax) + "px",                "height:" + this.randint(this.options.lineHeightMin, this.options.lineHeightMax) + "px",                "background: " + this.options.lineColors[this.randint(0, this.options.lineColors.length - 1)],                "left:" + this.randint(0, this.w - 20) + "px",                "top:" + this.randint(0, this.h) + "px",                "transform:rotate(" + this.randint(-30, 30) + "deg)",                "-ms-transform:rotate(" + this.randint(-30, 30) + "deg)",                "-moz-transform:rotate(" + this.randint(-30, 30) + "deg)",                "-webkit-transform:rotate(" + this.randint(-30, 30) + "deg)",                "-o-transform:rotate(" + this.randint(-30, 30) + "deg)",                "font-family:" + this.options.fonts[this.randint(0, this.options.fonts.length - 1)],                "font-weight:" + this.randint(400, 900)            ].join(";");            this.dom.appendChild(dom);             this.lineDoms.push(dom);        }    },createCode: function(){        this.code = this.randstr(this.options.len);    },verify: function(code){        return this.code === code;    },randint: function(n, m){        var c = m-n+1;        var num = Math.random() * c + n;        return  Math.floor(num);    },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','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 mvcode = isc.M3Vcode.create({width: 100,height: 30,options: {len: 5,bgColor: "#444444",colors: ["#DDDDDD","#DDFF77","#77DDFF","#99BBFF",//"#7700BB","#EEEE00"]}});

0 0