<!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>