html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码</title>
<script src="js/code.js"></script>
<style>
.code{border: 1px solid #ccc;padding: 10px;cursor: pointer;}
</style>
</head>
<body>
<br>
请输入：
<input type="text" id="user_text" /> <span class="code" id="code"></span>
<br>
<button id="btn">提交</button>
</body>
</html>
js代码：
var code=null, //显示验证码
btn=null, //提交按钮
texts=null, //文本框
code_list='123456789abcdefg', //验证码的取值
num=4; //验证码的位数
window.onload=function(){
init(); //初始化变量
change_code(); //验证码的内容
code.onclick=change_code; //点击改变验证码的内容
btn.onclick=test_code; //点击验证
}
//初始化变量
function init(){
code=document.getElementById('code');
btn=document.getElementById('btn');
texts=document.getElementById('user_text');
}
//改变验证码的内容
function change_code(){
var arr=code_list.split(''); //字符串转成数组
var str='';
for(var i=0; i<num; i++){
var j=parseInt(Math.random()*arr.length); //随机数作为数组的下标
str+=arr[j];
}
code.innerHTML=str;
}
//验证
function test_code(){
var val=texts.value; //获取文本框的值
var code_val=code.innerHTML; //获取验证码的值
if(val==code_val){
alert('提交成功！');
} else{
alert('验证码输入错误！');
}
}