<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.v_code {
margin: 0 auto;
width: 400px;
height: 400rpx;
}
#checkCode {
display: inline-block;
background-color: #ccc;
width: 100px;
font-size: 28px;
font-style: oblique;
color: blue;
}
#linkbt {
font-size: 12px;
color: rgb(146, 221, 221);
text-decoration: none;
}
.input_code {
margin: 10px;
}
#Button1 {
width: 70px;
height: 30px;
border: 1px rgb(96, 96, 96) solid;
}
#inputCode {
height: 30px;
}
</style>
</head>
<body>
<div class="v_code">
<div class="code_show">
<span class="code" id="checkCode"></span>
<a id="linkbt" href="#">看不清换一张</a>
</div>
<div class="input_code">
<label for="input_Code">验证码:</label>
<input type="text" id="inputCode">
<span id="text_show"></span>
</div>
<input type="button" id="Button1" value="确定">
</div>
<script>
//1.生成验证码
// 6位数 0-9 a-f 随机生成6位 内容必须是 0-9 a-f 字符串
//数组 下标 0.1.2....... 从数组当中随机下标 0-15位
// 2.进行验证 点击确定时,进行对比
//页面刚加载
window.onload = function () {
//页面刚一加载,就调用一次,生成一个随机数
var res = getCode()
function getCode() {
var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
var str = ''
for (var i = 0; i < 6; i++) {
var num = Math.round(Math.random() * (15 - 0) + 0);
str += arr[num];
}
return str
}
document.getElementById('checkCode').innerText = res;
// 点击事件
document.getElementById('linkbt').onclick = function(){
document.getElementById('checkCode').innerText = getCode();
}
//提交进行对比
document.getElementById('Button1').onclick = function(){
var code = document.getElementById('checkCode').innerText;
var inputCode = document.getElementById('inputCode').value;
if (code != inputCode) {
alert('您输入的验证码不正确');
document.getElementById('inputCode').value = '';
return false;
}
}
}
</script>
</body>
</html>
每天一个效果 :(2)验证码生成及校验
最新推荐文章于 2024-10-18 17:51:23 发布