JavaScript验证码
一个由于本地的数据实现的验证码功能，<style>
.divone{
margin-left: 100px;
}
.checkCode{
background-color: antiquewhite;
height: 30px;
width: 80px;
margin: 5px;
padding: 10px;
font-size: 25px;
}
.linkbt,.labelc{
font-size: 18px;
}
.linkbt:hover{
cursor: pointer;
color: rgb(31, 65, 255);
text-decoration: underline;
}
.labelc{
display:inline-block;
padding: 20px;
}
.inpt{
height: 30px;
}
.inpb{
margin-left: 160px;
padding: 5px 10px;
}
</style>
<body>
<div>
<div class="divone">
<span id="checkCode" class="checkCode"></span>
<a id="linkbt" class="linkbt">换一张</a>
</div>
<div>
<label for="inputCode" class="labelc">验证码:</label>
<input type="text" id="inputCode" class="inpt" />
<span id="text_show"></span>
</div>
<input id="btn1" type="button" class="inpb" value="确定" />
</div>
<script type="text/javascript">
let res = getCode();
function getCode(){
//定义一个数组是随机切换的数据
let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
// 保存数据
let str = '';
for(let i=0; i<6; i++){
// Math.round()四舍五入得到一个整数，
// Math.random()获取一个随机的数，默认值15-0;
let num = Math.round(Math.random()*(15-0)+0);
// 每次循环从arr数组中取出一个加上去。
str += arr[num];
}
// 返回6位的数据
return str;
}
// 获取显示验证码的标签，把数据赋值上去。
document.getElementById('checkCode').innerText = res;
// 跟换一张添加点击事件，点击运行调用我们之前创建的函数，重新赋值。
document.getElementById('linkbt').onclick = function(){
document.getElementById('checkCode').innerText = getCode();
}
// 数据对比
// 获取确定按钮
document.getElementById('btn1').onclick = function(){
// 获取验证码的数据是多少
let code = document.getElementById('checkCode').innerText;
// 获取输入框的数据
let inputCode = document.getElementById('inputCode').value;
// 如果不相等
if(code != inputCode){
alert('您输入的验证码不正确，请重新输入');
// 输入框清除内容
document.getElementById('inputCode').value = '';
// 更新验证码
document.getElementById('checkCode').innerText = getCode();
}else{
alert('验证正确');
}
}
</script>
</body>
