如图：
高手勿笑，不多说，直接上代码，相信聪明的你很容易看懂的。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
// 随机码生成
// length 随机码的长度
function makeValidtionCode(length) {
var random = 0;
var code = '';
for (var i = 0; i < length; i++) {
random = (74 * Math.random()) + 48;
if (!((random > 57 && random < 65) || (random > 90 && random < 97))) {
code += String.fromCharCode(random);
} else {
i--;
}
}
return code;
}
// 随机颜色生成
// code 随机码
function makeHtmlCode(code) {
var gValue = 0;
var cValue = '';
var htmlCode = '';
for (var i = 0; i < code.length; i++) {
cValue = '';
for (var j = 0; j < 3; j++) {
gValue = Math.floor(Math.random() * 255);
cValue += gValue.toString(16).toUpperCase();
}
cValue = '#' + cValue;
htmlCode += '<span style="color:' + cValue + ';padding-left:5px;">' + code.charAt(i) + '</span>';
}
return htmlCode;
}
var vc = '';
$(function () {
vc = makeValidtionCode(4);
$('#validationCode').html(makeHtmlCode(vc));
$('#validationCode').click(function () {
vc = makeValidtionCode(4);
$('#validationCode').html(makeHtmlCode(vc));
});
$('#validation').change(function () {
if (vc.toUpperCase() != this.value.toUpperCase()) {
alert('error');
} else {
alert('right');
}
});
});
</script>
<style type="text/css">
#validationCode
{
cursor: pointer;
letter-spacing: 3px;
background: #eee;
font-size: 16px;
font-family:monospace;
}
</style>
</head>
<body>
<label for="validation">输入验证码：</label>
<input type="text" id="validation"/>
<span id="validationCode"></span>
</body>
</html>
