验证密码的正确性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.show {
padding: 20px;
display: none;
}
em {
font-style: normal;
color: #ff6600
}
ul li{
width: 50px;
height: 50px;
border:1px solid red;
float: left;
list-style: none;
}
ul li{
border-right: none;
font-size: 50px;
line-height: 10px;
text-align: center;
}
ul li:nth-child(6){
border-right:1px solid red;
}
.clearfix:after{
height: 0;
content: '';
display: block;
height: 0;
font-size: 0;
visibility: hidden;
clear: both;
}
/*input{
height: 1;
opacity: 0;
width: 1;
border: none;
}*/
body{
height: 3000px;
}
</style>
</head>
<body>
<label for="inp">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</label>
<input type="tel" name="" id="inp" maxlength="6">
<div class="show">呵呵<span></span></div>
<div class="back" style="position:fixed; bottom: 0;">回顶部</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
$('#inp').on('input',function(){
var num = 6;
var vr = $('#inp').val();
var list = $('li');
/*$("#inp").focus();*/
$('span').text($('#inp').val());
for (var i = 0; i<num; i++) {
if (vr[i]) {
$(list[i]).text('.')
}else{
$(list[i]).text('')
}
}
if ($('span').text().length==6){
if ($('span').text()== '123456') {
alert('密码正确')
}else{
alert("密码错误")
}
}
})
$(window).scroll(function(){
$('.back').click(function(){
document.body.scrollTop = 0
})
})
</script>
</html>效果图如图所示
![这里写图片描述]