“21天好习惯”第一期－3 制作一个登入界面-3，添加验证码

一般登入账号时会有验证码，所以今天我就在我的登入界面中添加了可变的验证码

1.添加一个验证码的输入框和一个存放验证码的盒子

<div class="login">
	<a>登入</a>
</div>
<div class="loginIN">
	登入
	<div class="exist">
		关闭
	</div>
	<div class="loginININ">
		<input type="text" class="x" placeholder="请输入用户名" />
		<input type="password" class="x" placeholder="请输入密码" />
		<input type="text" class="x" placeholder="请输入验证码" />
		<div class="code"></div>
		<input type="button" class="x" value="立即登入" />
	</div>
</div>

2.为新加的input和divi添加css样式

.code {
position: absolute;
top: 62%;
left: 105%;
display: block;
width: 80px;
height: 40px;
font-size: 25px;
}
.code:hover {
cursor: pointer;
}

3.添加JavaScript，为了实现能点击后就自动生成4位的验证码，我先创建了一个字符串（包含了0-9，a-z,A-Z）,之后再用random函数随机生成。

var code = document.querySelector('.code');
function change() {
	var code = document.querySelector('.code');
	var num = '0123456789qwertyuiopasadfghjklmnbvcxzQWERTYUIOPLKJHGFDSAZXCVBNM';
	var str = '';
	for (var i = 0; i < 4; i++) {
		str += num.charAt(Math.floor(Math.random() * 62))
	}
	code.innerHTML = str;
}
change();
code.onclick = change;

效果图