验证码特效

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title></title>
   <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <style>
   .validateShow{70px;height:20px;border:1px solid red;display:inline-block;font-size:18px;background:#eeeeee;}
   .validateShow:hover{cursor:pointer;}
   </style>
</head>
<body>
   <label for = "validateNum">验证码</label>
   <input id="validateNum" type="text" />
   <div class="validateShow" title="刷新验证码"></div>
   <script>
   $(function(){
       //加载页面时，执行一次验证码
       getValidate();
       $(".validateShow").click(function(){
           //重新获取验证码
           getValidate();
       });

       function getValidate(){
           $(".validateShow").empty();
           //获取验证码
           var validate_len = 4;
           var ValidateNum = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
           var code = "";
           var dom = "";
           for(var i = 0;i<validate_len;i++){
               code = code + ValidateNum[parseInt(Math.random()*(ValidateNum.length))];
           }
           //$(".validateShow").html(code);非图片验证码
           //图片验证码
           for(var i = 0;i<validate_len;i++){
               dom += "<span style='color:"+ getRandomColor() +"'>"+ValidateNum[parseInt(Math.random()*(ValidateNum.length))]+"</span>";
           }
           $(dom).appendTo($(".validateShow"));
       }

       //获取随机的颜色
       function getRandomColor(){
           var color=new Array("0","3","6","9","C","F");
           var fColor = "";
           for(var i=0;i<color.length;i++){
               fColor += color[parseInt(Math.random()*6)];
           }
           return "#"+fColor;
       }
   })
   </script>
</body>
</html>