原理很简单，自己看代码！
<!DOCTYPE html>
<html>
<head>
<title>只能家居安全锁</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
body{
margin:10px;
}
.show_data{
overflow: hidden;
}
.show_item{
display: block;
float: left;
width: 40px;
height: 28px;
border-bottom: 1px solid #ccc;
margin-right: 15px;
text-align: center;
line-height: 28px;
}
.keyboard{
margin-top: 10px;
}
.data-btn{
display: inline-block;
width: 30px;
height: 30px;
border:1px solid #ccc;
background: #f1f1f1;
margin-bottom: 5px;
margin-right: 5px;
line-height: 30px;
text-align: center;
border-radius: 4px;
box-shadow: 1px 1px 3px #ddd;
}
.delete_btn{
display: inline-block;
width: 100px;
}
.ok_btn{
width: 100px;
}
</style>
<div class="dcontent">
<!-- 显示 -->
<div class="show_data">
<span class="show_item" id="show_1"> </span>
<span class="show_item" id="show_2"> </span>
<span class="show_item" id="show_3"> </span>
<span class="show_item" id="show_4"> </span>
<span class="show_item" id="show_5"> </span>
<span class="show_item" id="show_6"> </span>
</div>
<!-- 假键盘 -->
<div class="keyboard">
<span class="data-btn add_data" data=0>0</span>
<span class="data-btn add_data" data=1>1</span>
<span class="data-btn add_data" data=2>2</span>
<span class="data-btn add_data" data=3>3</span>
<span class="data-btn add_data" data=4>4</span>
<span class="data-btn add_data" data=5>5</span>
<span class="data-btn add_data" data=6>6</span>
<span class="data-btn add_data" data=7>7</span>
<span class="data-btn add_data" data=8>8</span>
<span class="data-btn add_data" data=9>9</span>
</div>
<span class="data-btn delete_btn" id="delete_data">删除</span>
<span class="data-btn ok_btn" id="ok_data">完成</span>
</div>
<script type="text/javascript">
// 输入的数据
var data_list=Array();
show_data();
// 显示数据函数
function show_data() {
// 将原有html清空 然后重新显示
$('.show_item').html("");
for (var i = 0; i < data_list.length; i++) {
var ind=i+1;
$("#show_"+ind).html(data_list[i]);
}
console.log(data_list);
}
// 输入数字
function add_data(data) {
//追加完数字后重新显示
if (data_list.length<=5) {
data_list.push(data);
show_data();
}
}
//删除数字
function delete_data() {
if (data_list.length>=1) {
data_list.pop();
//删除完数组后，重新显示
show_data();
}
}
//点击键盘事件
$(".add_data").click(function(){
data=$(this).attr("data");
add_data(data);
});
//点击删除事件
$(".delete_btn").click(function(){
delete_data();
});
//点击完成事件 将数组转化为字符 然后显示字符
$(".ok_btn").click(function(){
data_str=data_list.join("");
alert(data_str);
});
</script>
</body>
</html>
网友评论