HTML部分
<body>
<div>
<input type="text" id="in"/>
<span id="code">验证码</span>
<button id="sure">确认</button>
</div>
</body>
css部分
<style>
div{
width: 300px;
margin: 60px auto;
}
#code{
border: #8A2BE2 1px solid;
}
</style>
样式：
js部分
<script type="text/javascript">
//获取随机字符串
var arr = ['1','2','3','4','5','6','7','8','9','0'];
var str = '';
function getNum(){
for(i=0;i<6;i++){
var num = Math.floor(Math.random()*(9-0)+0);
console.log(arr[num]);
str += arr[num];
}
return str;
}
getNum();
document.getElementById('code').innerHTML = str;
var code = document.getElementById('code').innerHTML;
//将返回的字符串赋值给验证码的显示
document.getElementById('sure').onclick = function(){
//获取用户输入
var j = document.getElementById('in').value;
//进行校验
if(code!=j){
alert('您输入的验证码错误');
document.getElementById('in').value = '';
}else{
window.location.assign("http://www.baidu.com")
}
}
</script>
逻辑：
1、定义一个数组，里面存放0~9的数字，根据随机取该数组的索引下标，达到获取随机数的目的
2、将获取到的下标通过循环，依次添加到一个字符串中，并返回该字符串
3、将字符串输出给相应位置
4、点击确认后，匹配用户输入的字符与生成的字符串是否一致
5、当匹配错误后，弹出一个提示框显示验证错误，并清空输入框。
必须还得有进步的空间。这个太丑了。就是练手用的。