一次有趣的前端面试

最新推荐文章于 2025-09-10 11:40:22 发布

weixin_34383618

最新推荐文章于 2025-09-10 11:40:22 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签：面试前端 javascript ViewUI

原文链接：https://juejin.im/post/5c8386446fb9a04a016523d2

昨天下午冒雨去一家挺大的公司面试前端，笔试题和面试都通过了，后面人事部叫我去公司办公区坐，我以为我过了，没想到啊！她说我们这边还有机考，这是试题。废话不说，直接上图

这是ui图需求如下：

1、根据ui排版

2、定义一个按钮当显示提现框时，背景淡入再淡出，提现界面，从缩小(0)到放大(1)，关闭提现框时，提现界面从原来的（1）到（0）；提示：0就是看不见，1就是看见，动画效果是缩放。

3、最下面四个输入框只能输入一个数字，当输入框输入第一个数字时，自动聚焦到第二个输入框，以此类推，到最后一个结束。

这就是机考题！。。。直接我就懵逼了，结果我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复制代码