<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <div> <h1>验证码1</h1> <input type="text" id="code1"/> <div id="vCode1" style="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="100px; height: 30px; border: 1px solid #ccc; display: inline-block;"></div> <button id="btn2">验证</button> </div> </body> </html>
JS代码
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)); alert(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() }, false); }; (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 = [ " 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, "" + 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);