<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, inital-scale=1.0" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.clearfix {
}
.clearfix:after {
content: '';
display: black;
clear: both;
}
.wrap {
height: 100%;
width: 100%;
padding-top: 50%;
position: relative;
}
.passworld {
width: 240px;
height: 30px;
line-height: 30px;
margin: 0 auto;
}
.passworld-wrap {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.passworld-item {
float: left;
height: 100%;
width: 12.5%;
border-radius: 5px;
text-align: center;
border: 1px solid #ccc;
}
.passworld-item+.passworld-item {
margin-left: 5%;
}
.key-board {
width: 100%;
height: 230px;
position: absolute;
bottom: 0;
left: 0;
}
.key-board-wraper {
width: 100%;
height: 100%;
border-top: 1px solid #ccc;
padding-top: 20px;
}
.key-board-item {
width: 32%;
height: 50px;
line-height: 50px;
margin-left: 1%;
margin-bottom: 2px;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
float: left;
}
.toast {
padding-top: 20px;
text-align: center;
}
.active {
border: 1px solid #5cb85c;
color: #fff;
background-color: #5cb85c;
}
.passworld-star {
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="passworld">
<ul class="passworld-wrap clearfix">
<li class="passworld-item">
<div class="passworld-star">*</div>
</li>
<li class="passworld-item">
<div class="passworld-star">*</div>
</li>
<li class="passworld-item">
<div class="passworld-star">*</div>
</li>
<li class="passworld-item">
<div class="passworld-star">*</div>
</li>
<li class="passworld-item">
<div class="passworld-star">*</div>
</li>
<li class="passworld-item">
<div class="passworld-star">*</div>
</li>
</ul>
</div>
<div class="toast">请输入密码</div>
<div class="key-board">
<ul class="key-board-wraper clearfix">
<li class="key-board-item">1</li>
<li class="key-board-item">2</li>
<li class="key-board-item">3</li>
<li class="key-board-item">4</li>
<li class="key-board-item">5</li>
<li class="key-board-item">6</li>
<li class="key-board-item">7</li>
<li class="key-board-item">8</li>
<li class="key-board-item">9</li>
<li class="key-board-item">确认</li>
<li class="key-board-item">0</li>
<li class="key-board-item">回退</li>
</ul>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">
var arr = [];
$('.key-board-item')
.on('click', function( e ) {
// 初始化this
var _this = $(this);
// 模拟点击效果
_this.addClass('active')
setTimeout(function() {
_this.removeClass('active')
}, 50)
if(_this.text() == '回退') {
if(arr.length == 0) {
$('.toast').html('请输入密码')
return false;
} else {
$('.passworld-star').eq(arr.length-1).hide();
arr.pop();
}
} else {
if(arr.length == 6) {
alert('最多输入六位')
return false
} else {
$('.passworld-star').eq(arr.length).show();
arr.push(_this.text());
}
}
$('.toast').html(arr)
})
</script>
</html>
网友评论