获取特定的随机整数:parseInt(Math.random()*(最大值-最小值) + 最小值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.v_code {
width: 600px;
margin: 0 auto;
}
.v_code>input {
width: 60px;
height: 36px;
margin-top: 10px;
}
.code_show {
overflow: hidden;
}
.code_show span {
display: block;
float: left;
margin-bottom: 10px;
}
.code_show a {
display: block;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.code {
font-style: italic;
background-color: #f5f5f5;
color: blue;
font-size: 30px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
padding: 0 5px;
text-align: center;
}
#inputCode {
width: 100px;
height: 30px;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
.form {
width: 300px;
height: 300px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="v_code">
<div class="code_show">
<span class="code" id="checkCode">af231a</span>
<a id="linkbt">看不清换一张</a>
</div>
<div class="input_code">
<label for="inputCode">验证码:</label>
<input type="text" id="inputCode" />
<span id="text_show"></span>
</div>
<input id="Button1" type="button" value="确定" />
</div>
<script>
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
// 获取索引数
// 获取特点范围的整数:parseInt(Math.random()*(最大值-最小值) + 最小值)
// parseInt(Math.random()*(15-0)+0)获取[0,15)的整数
// parseInt(Math.random()*(36-0)+0)+1获取[0,36]的整数
var str = ''
for (var i = 0; i < 6; i++) {
str += arr[parseInt(Math.random() * 36)]
};
// console.log(str);
document.getElementById('checkCode').innerHTML = str;
// 换验证码
var btn1 = document.getElementById('linkbt');
// 确定按钮
var btn2 = document.getElementById('Button1');
// 重新获取验证码
btn1.onclick = function() {
// 若是不把str清空,后产生多个str
str = '';
// document.getElementById('checkCode').innerHTML = '';
for (var i = 0; i < 6; i++) {
str += arr[parseInt(Math.random() * 36)]
}
document.getElementById('checkCode').innerHTML = str;
};
// 确认验证
btn2.onclick = function() {
// 验证码
var val = document.getElementById('inputCode').value;
// 验证信息
var text = document.getElementById('text_show')
// 判断输入的验证码是否正确
if (val !== str) {
text.innerHTML = '验证码不正确'
text.style.color = 'red'
return
};
text.innerHTML = '验证码正确';
text.style.color = 'green';
}
</script>
</body>
</html>
效果图: