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('验证码输入错误!'); } }