一次有趣的前端面試

昨天下午冒雨去一家挺大的公司面試前端，筆試題和麪試都經過了，後面人事部叫我去公司辦公區坐，我覺得我過了，沒想到啊！她說咱們這邊還有機考，這是試題。廢話不說，直接上圖

這是ui圖 需求以下：

一、根據ui排版

二、定義一個按鈕當顯示提現框時，背景淡入再淡出，提現界面，從縮小(0)到放大(1)，關閉提現框時，提現界面從原來的（1）到（0）；提示：0就是看不見，1就是看見，動畫效果是縮放。

三、最下面四個輸入框只能輸入一個數字，當輸入框輸入第一個數字時，自動聚焦到第二個輸入框，以此類推，到最後一個結束。

這就是機考題！ 。。。直接我就懵逼了，結果我gg了。可能本身的jQuery水平不夠，本身是vue和小程序開發對於jQuery仍是挺不熟悉的。後來本身回來實現了一下，作出效果以下（附帶代碼）

<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>
複製代碼

<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>
複製代碼

惋惜了，動畫我就沒提供出來，有興趣的同窗去折磨一下。

期待有更好的解決方案，提示：輸入時請把輸入法調爲英文，中文數字會出現輸入的內容時keyCode=229；

有問題能夠評論留言，聯繫我----qq：652165177

minijie複製代碼