<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<script src="jquery.min.js"></script>
<title>输入密码</title>
<style>
.img {
margin-top: 50px;
}
.line1 {
font-size: 15px;
color: #868585;
margin-top: 28px;
margin-bottom: 8px;
}
td {
width: 33.3%;
}
table {
width: 100%;
text-align: center;
line-height: 2.3;
font-size: 25px;
background-color: #F8F8F8;
border-collapse: collapse;
}
table,table tr th,table tr td {
border: 1px solid #E9E9E9;
}
.selectCarCon {
width: 100%;
position: fixed;
bottom: 0;
}
.block {
display: block
}
.td {
background-color: #E6E6E6
}
.box,.box input {
height: 55px;
width: 55px;
}
.input {
display: flex;
justify-content: center;
}
input {
font-size: 55px;
text-align: center;
border:1px solid #b4b4b4;
border-right:1px solid rgba(255,255,255,0);
}
.box:last-child input{
border-right:1px solid #b4b4b4;
}
</style>
</head>
<body style="background-color:white">
<div align="center" class="line1">
<p>请输入支付密码</p>
</div>
<input type="hidden" id="text" maxLength="6" />
<div align="center">
<div class="input">
<div class="box">
<input type="password" maxLength="1" class="onestr1" readonly>
</div>
<div class="box">
<input type="password" maxLength="1" class="onestr2" readonly>
</div>
<div class="box">
<input type="password" maxLength="1" class="onestr3" readonly>
</div>
<div class="box">
<input type="password" maxLength="1" class="onestr4" readonly>
</div>
<div class="box">
<input type="password" maxLength="1" class="onestr5" readonly>
</div>
<div class="box">
<input type="password" maxLength="1" class="onestr6" readonly>
</div>
</div>
</div>
<div class="selectCarCon" style="left: 0px;">
<div class="block">
<table>
<tr>
<td onclick="add(1)">1</td>
<td onclick="add(2)">2</td>
<td onclick="add(3)">3</td>
</tr>
<tr>
<td onclick="add(4)">4</td>
<td onclick="add(5)">5</td>
<td onclick="add(6)">6</td>
</tr>
<tr>
<td onclick="add(7)">7</td>
<td onclick="add(8)">8</td>
<td onclick="add(9)">9</td>
</tr>
<tr>
<td class="td"></td>
<td onclick="add(0)">0</td>
<td class="td" onclick="deletetd()"><image src="delete.png" width=40px height=40px></image></td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript">
function add(n) {
var str = $("#text").val();
var now=str.length+1;
var newstr = "";
$(".onestr"+now).val("1");
if (str.length<6)
{
newstr = str + n;
$("#text").val(newstr);
}
if (newstr.length == 6){
alert("开始校验密码"+ $("#text").val());
}
}
function deletetd(){
var str = $("#text").val();
var newstr=str.slice(0,str.length-1);
$(".onestr"+str.length).val("");
$("#text").val(newstr);
}
</script>
</html>
