js实现验证码
现在验证码功能已经十分鸡肋，利用js实现其实不难，大部分使用随机实现，随机宽高，随机颜色，加入几个原点div，因为初学，所以有很多地方重复和复杂，希望指正。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{margin :0;padding:0;} 8 #a1{width:98px;height:48px;text-align:center;margin:10px auto;position:relative;z-index:-2} 9 span{z-index:1000} 10 </style> 11 </head> 12 <body> 13 <div id="a1"> 14 <span></span> 15 <span></span> 16 <span></span> 17 <span></span> 18 </div> 19 <script> 20 var oa1 = document.getElementById("a1"); 21 var ospan = document.getElementsByTagName("span"); 22 oa1.style.backgroundColor=divColor(); 23 var se = fn(); 24 dian(); 25 for(var i = 0;i < 4;i++){ 26 ospan[i].innerHTML = se[i]; 27 ospan[i].style.color=coLoi(); 28 ospan[i].style.fontSize=fontSize() + "px"; 29 ospan[i].style.marginLeft = fontSpac() + "px"; 30 ospan[i].style.lineHeight = lineSize() + "px"; 31 ospan[i].style.fontStyle = fontXie(); 32 } 33 34 //封装字符串、数组 35 function fe(){ 36 var capital="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 37 var lowercase="abcdefghijklmnopqrstuvwxyz"; 38 var num="1234567890"; 39 var arr=[capital,lowercase,num]; 40 return arr; 41 } 42 43 //获取26的随机数 44 function fa(){ 45 return Math.floor(Math.random() * 26); 46 } 47 //设置10的随机数 48 function f1(){ 49 return Math.floor(Math.random() * 9); 50 } 51 //封装数组 52 function f2(){ 53 var arr=[]; 54 arr[0]=fe()[0].charAt(fa()); 55 arr[1]=fe()[1].charAt(fa()); 56 arr[2]=fe()[2].charAt(f1()); 57 return arr; 58 } 59 //实现 60 function fn(){ 61 var sum=""; 62 var t=f2(); 63 for(var i=0;i<3;i++){ 64 var j = Math.floor(Math.random() * t.length); 65 sum+=t[j]; 66 t.splice(j,1); 67 } 68 var z= Math.floor(Math.random() * f2().length); 69 sum+=f2()[z]; 70 console.log(sum); 71 return sum; 72 } 73 //封装div随机颜色 74 function divColor(){ 75 var j; 76 while(1){ 77 j = Math.floor(Math.random() * 0xffffff).toString(16); 78 console.log(j); 79 if(j.length == 6) 80 break; 81 else 82 j = ""; 83 } 84 coloi = j; 85 return "#" + j; 86 } 87 //封装字体随机颜色 88 function coLoi(){ 89 //var j = parseInt(coloi,16); 90 var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(coloi); 91 var r = (255 - parseInt(result[1],16)).toString(16); 92 r = r.length < 2 ? 0 + r : r; 93 var g = (255 - parseInt(result[2],16)).toString(16); 94 g = g.length < 2 ? 0 + g : g; 95 var b = (255 - parseInt(result[3],16)).toString(16); 96 b = b.length < 2 ? 0 + b : b; 97 return "#" + r + g + b; 98 } 99 //封装字体大小及行高 100 function fontSize(){ 101 var j; 102 var max=24;var min=14; 103 j=Math.floor(Math.random() * (max-min)+min); 104 return j; 105 } 106 function lineSize(){ 107 var j; 108 var max=49;var min=24; 109 j=Math.floor(Math.random() * (max-min)+min); 110 return j; 111 } 112 //封装字体间距 113 function fontSpac(){ 114 var j; 115 var max=8;var min=2; 116 j=Math.floor(Math.random() * (max-min)+min); 117 return j; 118 } 119 //字体倾斜 120 function fontXie(){ 121 var j; 122 j=Math.floor(Math.random() * 3); 123 var are = ["normal","italic","oblique"]; 124 return are[j]; 125 } 126 //点点div 127 function divColo(){ 128 var j; 129 while(1){ 130 j = Math.floor(Math.random() * 0xffffff).toString(16); 131 132 if(j.length == 6) 133 break; 134 else 135 j = ""; 136 } 137 return "#" + j; 138 } 139 function fontk(){ 140 var max=10;var min=6; 141 return Math.floor(Math.random() * (max-min)+min); 142 } 143 function fontt(){ 144 var max=28;var min=10; 145 return Math.floor(Math.random() * (max-min)+min) 146 } 147 function fontl(){ 148 var max=78;var min=10; 149 return Math.floor(Math.random() * (max-min)+min); 150 } 151 function dian(){ 152 var j,k,l; 153 var max=4;var min=8; 154 j = Math.floor(Math.random() * (max-min)+min); 155 var oFragmeng = document.createDocumentFragment(); 156 for(var i = 0;i < j;i ++){ 157 k = fontk(); 158 t = fontt(); 159 l = fontl(); 160 var oDiv = document.createElement("div"); 161 oDiv.style.height = k + "px"; 162 oDiv.style.width = k + "px"; 163 oDiv.style.borderRadius = k + "px"; 164 oDiv.style.backgroundColor = divColo(); 165 oDiv.style.position = "absolute"; 166 oDiv.style.top = t + "px"; 167 oDiv.style.left = l + "px"; 168 oDiv.style.zIndex = -1; 169 //oDiv.style.opacity = 0.5; 170 oFragmeng.appendChild(oDiv); 171 } 172 oa1.appendChild(oFragmeng); 173 } 174 </script> 175 </body> 176 </html>
