昨天下午冒雨去一家挺大的公司面試前端，筆試題和面試都通過(guò)了，后面人事部叫我去公司辦公區(qū)坐，我以為我過(guò)了，沒(méi)想到?。∷f(shuō)我們這邊還有機(jī)考，這是試題。廢話不說(shuō)，直接上圖
需求如下：
1、根據(jù)ui排版
2、定義一個(gè)按鈕當(dāng)顯示提現(xiàn)框時(shí)，背景淡入再淡出，提現(xiàn)界面，從縮小(0)到放大(1)，關(guān)閉提現(xiàn)框時(shí)，提現(xiàn)界面從原來(lái)的（1）到（0）；提示：0就是看不見(jiàn)，1就是看見(jiàn)，動(dòng)畫效果是縮放。
3、最下面四個(gè)輸入框只能輸入一個(gè)數(shù)字，當(dāng)輸入框輸入第一個(gè)數(shù)字時(shí)，自動(dòng)聚焦到第二個(gè)輸入框，以此類推，到最后一個(gè)結(jié)束。
這就是機(jī)考題！
。。。直接我就懵逼了，結(jié)果我gg了?？赡茏约旱膉Query水平不夠，自己是vue和小程序開(kāi)發(fā)對(duì)于jQuery還是挺不熟悉的。后來(lái)自己回來(lái)實(shí)現(xiàn)了一下，做出效果如下（附帶代碼）
<!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">獲取驗(yàn)證碼</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">提現(xiàn)</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>
可惜了，動(dòng)畫我就沒(méi)提供出來(lái)，有興趣的同學(xué)去折磨一下。
期待有更好的解決方案，提示：輸入時(shí)請(qǐng)把輸入法調(diào)為英文，中文數(shù)字會(huì)出現(xiàn)輸入的內(nèi)容時(shí)keyCode=229；
有問(wèn)題可以評(píng)論留言，聯(lián)系我----qq：652165177
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? minijie
