昨天下午冒雨去一家挺大的公司面试前端，笔试题和面试都通过了，后面人事部叫我去公司办公区坐，我以为我过了，没想到啊！她说我们这边还有机考，这是试题。废话不说，直接上图
这是ui图需求如下：
2、定义一个按钮当显示提现框时，背景淡入再淡出，提现界面，从缩小(0)到放大(1)，关闭提现框时，提现界面从原来的（1）到（0）；提示：0就是看不见，1就是看见，动画效果是缩放。
3、最下面四个输入框只能输入一个数字，当输入框输入第一个数字时，自动聚焦到第二个输入框，以此类推，到最后一个结束。
这就是机考题！ 。。。直接我就懵逼了，结果我gg了。可能自己的jQuery水平不够，自己是vue和小程序开发对于jQuery还是挺不熟悉的。后来自己回来实现了一下，做出效果如下（附带代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
RunJS 演示代码
</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* #wrap {
margin: auto;
width: 300px;
}
#wrap input[type=number] {
width: 30px;
height: 20px;
float: left;
text-align: center;
} */
.bgBox {
width: 100%;
height: 100%;
background-color: #ccc;
position: absolute;
padding: 0 30px;
box-sizing: border-box;
}
.bgBox .bgBox_fiexd {
width: 100%;
height: 100%;
position: relative;
}
.bgBox .bgBox_contain {
width: 100%;
height: 250px;
background-color: #fff;
border-radius: 5px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
padding: 20px;
box-sizing: border-box;
}
.bgBox_contain .bgBox_contain_phone {
width: 100%;
height: 50px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
margin-bottom: 40px;
}
.bgBox_contain_phone .bgBox_contain_phone_input {
height: 100%;
flex: 1;
margin-right: 10px;
}
.bgBox_contain_phone_input input {
width: 100%;
height: 100%;
border: 0;
outline: none;
background-color: transparent;
border-radius: 0;
}
.bgBox_contain_phone_button {
display: block;
color: rgb(27, 114, 212);
border: 1px solid rgb(27, 114, 212);
border-radius: 5px;
padding: 3px;
}
.bgBox_contain .bgBox_input {
width: 100%;
height: 40px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}
.bgBox_contain .bgBox_input input {
width: 40px;
height: 100%;
border: 0;
margin-left: 10px;
outline: none;
background-color: transparent;
border-radius: 0;
text-align: center;
border: 1px solid #ccc;
}
.bgBox_contain .bgBox_input input:first-child {
margin-left: 0;
}
.bgBox_button {
display: block;
background-color: rgb(27, 114, 212);
color: #fff;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 0 auto;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="bgBox">
<div class="bgBox_fiexd">
<div class="bgBox_contain">
<div class="bgBox_contain_phone">
<div class="bgBox_contain_phone_input">
<input type="number" name="phone">
</div>
<span class="bgBox_contain_phone_button">获取验证码</span>
</div>
<ul class="bgBox_input">
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
</ul>
<span class="bgBox_button">提现</span>
</div>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script>
$(function () {
$(".bgBox_input input").on("keyup", function (event) {
var eventObj = event || e;
var keyCode = eventObj.keyCode || eventObj.which;
if (keyCode >= 96 && keyCode <= 105 || keyCode >= 48 && keyCode <= 57) {
if ($(this).index() == $(".bgBox_input input").length - 1) {
$(".bgBox_input input")[$(this).index()].blur();
} else {
var index = $(this).index() + 1;
$(this).attr("disabled", true);
$(".bgBox_input input")[index].focus();
}
} else if (keyCode == 8) {
var index = $(this).index();
if (index > 0) {
$(".bgBox_input input")[index - 1].disabled = false;
$(".bgBox_input input")[index - 1].focus();
}
} else {
if (/[^0-9]/g.test($(this).val())) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
}
}
})
})
</script>
</body>
</html>
可惜了，动画我就没提供出来，有兴趣的同学去折磨一下。
期待有更好的解决方案，提示：输入时请把输入法调为英文，中文数字会出现输入的内容时keyCode=229；
有问题可以评论留言，联系我----qq：652165177
minijie
