smartClient 验证码

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"
			]
		}
	});