随机验证码实现 

 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>

 

posted @ 2017-04-09 14:11  惠远建  阅读(263)  评论(0)    收藏  举报