随机验证码实现
Posted 光炎
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了随机验证码实现相关的知识，希望对你有一定的参考价值。
1 <!doctype html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>随机验证码</title> 6 <style> 7 div{ 8 height: 20px; 9 background: url(images/1.jpg); 10 font-size: 20px; 11 } 12 i{ 13 cursor: pointer; 14 } 15 </style> 16 17 </head> 18 <body> 19 <div id = "imgId"> 20 <span id="a"></span> 21 <span id="b"></span> 22 <span id="c"></span> 23 <span id="d"></span> 24 </div> 25 <i onclick="dj()">获取验证码</i> 26 </body> 27 </html> 28 29 <script type="text/javascript"> 30 31 //随机字母 32 function sjWord(){ 33 var word = [0,1,2,3,4,5,6,7,8,9,‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘,‘i‘,‘j‘,‘k‘,‘l‘ 34 ,‘m‘,‘n‘,‘o‘,‘p‘,‘q‘,‘r‘,‘s‘,‘t‘,‘u‘,‘v‘,‘w‘,‘x‘,‘y‘,‘z‘,‘A‘,‘B‘,‘C‘,‘D‘ 35 ,‘E‘,‘F‘,‘G‘,‘H‘,‘I‘,‘J‘,‘K‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘ 36 ,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘]; 37 var rad = parseInt(Math.random() * word.length); 38 return word[rad]; 39 } 40 41 //随机颜色 42 function sjColor(){ 43 var color = [0,1,2,3,4,5,6,7,8,9,‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘]; 44 var rad = parseInt(Math.random() * color.length); 45 //alert(color[rad]); 46 return color[rad]; 47 } 48 sjColor(); 49 //alert(sjColor()); 50 51 //var a = document.getElementById("a"); 52 function dj(){ 53 //clearInterval(timer); 54 var a = document.getElementById("a"); 55 var b = document.getElementById("b"); 56 var c = document.getElementById("c"); 57 var d = document.getElementById("d"); 58 a.innerHTML = (sjWord()); 59 b.innerHTML = (sjWord()); 60 c.innerHTML = (sjWord()); 61 d.innerHTML = (sjWord()); 62 a.style.color = ("#"+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()); 63 b.style.color = ("#"+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()); 64 c.style.color = ("#"+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()); 65 d.style.color = ("#"+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()+sjColor()); 66 } 67 68 dj(); 69 //var timer = setInterval(dj,2000); 70 </script>
以上是关于随机验证码实现的主要内容，如果未能解决你的问题，请参考以下文章