前言:
本文章为一个大一小白连写js所写,文章给出注释并准备好开始的所需的简易样式,但对于真正用于实践可能没有多大参考价值,慎入
需求
- 加载时能自动生成验证码
- 点击图片能更换验证码
- 能验证输入验证码是否正确
初始代码
<!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"></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>
</script>
</body>
</html>
js部分
<script>
window.onload=function(){
function getcode(){//在页面加载的时候要用,点击的时候也要用,故打包成函数
//随机生成6位内容为0-9,a-f的验证码
//利用数组实现随机效果,数组内容为验证码范围
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var str='';
for (let i = 0; i < 6; i++) {
let num=Math.round(Math.random()*(15-0)+0);//随机生成数组下标
str +=arr[num];
}
return str;
}
//加载时更换验证码
document.getElementById('checkCode').innerText=getcode();
//点击更换验证码
document.getElementById('linkbt').onclick=function(){
document.getElementById('checkCode').innerText=getcode();
}
//验证验证码是否正确
document.getElementById('Button1').onclick=function(){
if(document.getElementById('inputCode').value!=document.getElementById('checkCode').innerText){
alert('输入错误,请重输');
}
}
}