js生成随机验证码
2020-11-12 本文已影响0人
幻城sh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// 验证码——随机
// 1、随机生成一个六位数的验证码（0-9，a-f）
// 2、点击按钮切换验证码
// 3、点击提交时，input的value值与验证码比较
// 首先可以确定的是随机生成的验证码是要封装的函数
window.onload = function() {
var res = getCode();
// 封装随机验证码函数
function getCode() {
// 定义一个数组来拼接
var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','f',]
// 定义一个空字符串来进行拼接
var str = '';
for(var i = 0; i < 6; i++) {
var num = Math.round(Math.random()*(15-0)+0);
// console.log(num);
str += arr[num];
}
return str;
// console.log(str)
}
// 获取文本位置，把得到的验证码赋值给文本
document.getElementById('text').innerText = res;
// 点击按钮进行验证码的切换
document.getElementsByTagName('a')[0].onclick = function() {
document.getElementById('text').innerText = getCode();
}
// 进行对比
document.getElementById('btn').onclick = function() {
var code = document.getElementById('text').innerText;
var inputCode = document.getElementById('inputTxt').value;
if(code != inputCode) {
alert('验证码错误');
document.getElementById('inputTxt').value = ''; // 验证码错误清空input
document.getElementById('text').innerText = getCode(); // 验证码错误，再次刷新验证码
return false;
}else {
alert('验证码正确');
}
}
}
</script>
</head>
<body>
<div class="one">
验证码：
<span id="text">111111</span>
<a href="">看不清 换一张</a>
</div>
<div class="ipt">
<input type="text" id="inputTxt" />
</div>
<button type="button" id="btn">提交</button>
</body>
</html>
