JavaScript面试题81-90

最新推荐文章于 2022-03-04 09:32:00 发布

Ashy-

最新推荐文章于 2022-03-04 09:32:00 发布

阅读量259

点赞数

分类专栏：前端面试题文章标签： html css js javascript gwt

本文链接：https://blog.csdn.net/weixin_43794299/article/details/113823659

版权

前端面试题专栏收录该内容

21 篇文章 3 订阅

订阅专栏

JavaScript面试题81-90

每日坚持学10道题

81.

[问答题]
尝试实现注释部分的 Javascript 代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：

var Obj = function (msg) {
    this.msg = msg;
    this.shout = function () {
        alert(this.msg);
    }
    this.waitAndShout = function () {
        //隔五秒钟后执行上面的 shout 方法
    }
}

来自：阿里巴巴前端工程师面试题
参考：

var Obj = function (msg) {
    this.msg = msg;
    this.shout = function () {
        alert(this.msg);
    }
    this.waitAndShout = function () {
        var that = this;
        setTimeout(that.shout, 5000);
        //隔五秒钟后执行上面的 shout 方法
    }
    return this;
}
Obj("shouting").waitAndShout();

82. 实现二级菜单

[问答题]
在页面上实现一个二级菜单控件
在这里插入图片描述

这个控件可以绑定到页面上的任意一个元素，当点击页面元素出现菜单；
菜单出现的方向根据所在页面的位置自动进行调整；
一级菜单中的元素，鼠标划过后，将会在相应的位置出现二级菜单，二级菜单中的元素点击将会有事件响应。

来自：人人网前端工程师面试题
答案：无

83. 转换颜色编码

[问答题]
请编写一个 JavaScript 函数 toRGB，它的作用是转换 CSS 中常用的颜色编码。要求：

alert(toRGB("#0000FF")); // 输出 rgb(0, 0, 255)
alert(toRGB("invalid")); // 输出 invalid 
alert(toRGB("#G00")); // 输出 #G00

来自：阿里巴巴前端工程师笔试
参考：

function toRGB(color) {
    var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    match = color.match(regex)
    return match ? 'rgb(' + parseInt(match[1], 16) + ',' + parseInt(match[2],
        16) + ',' + parseInt(match[3], 16) + ')' : color
}

84. input 输入框的自动匹配

[问答题]
实现 input 输入框的自动匹配

对 input 框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input 框的下方；
只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗；
通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到 input 框中；

来自：人人网前端工程师笔试
参考：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>文本框自动补全</title>
    <script src="../script/base.js"></script>
    <script>
        document.createElement("datalist");
        function autocomplete(textbox) {
            var $ = window.gucong;
            textbox = document.querySelector(textbox);
            var datalist = document.getElementById(textbox.getAttribute("list"));
            optList = datalist.children;
            datalist = document.createElement("ul");
            $.each(optList, function () {
                var li = document.createElement("li");
                li.setAttribute("label", this.getAttribute("label"));
                li.setAttribute("value", this.getAttribute("value"));
                datalist.appendChild(li);
            });
            textbox.setAttribute("list", "");
            $.addClass(datalist, "datalist");
            document.documentElement.appendChild(datalist);
            textbox.autocomplete = "off";
            textbox.addEventListener("keydown", function (e) {
                switch (e.keyCode) {
                    case 38: // up
                        e.preventDefault();
                        moveSelect(-1);
                        break;
                    case 40: // down
                        e.preventDefault();
                        moveSelect(1);
                        break;
                    case 9: // tab
                    case 13: // return
                        var opt = datalist.querySelector(".highlight");
                        if (opt) {
                            selectOpt(opt)
                            e.preventDefault();
                            return false;
                        }
                        break;
                    default:
                        window.setTimeout(onChange, 0);;
                }
            }, true);
            textbox.addEventListener("input", onChange, false);
            textbox.addEventListener("blur", function () {
                datalist.style.display = "none";
            }, false);
            function onChange() {
                if (textbox.value) {
                    optList = [];
                    var match = new RegExp(textbox.value, "ig"),
                        pos = $.findPos(textbox),
                        count = 0;
                    $.each(datalist.children, function () {
                        var str = this.getAttribute("label");
                        if (match.test(str)) {
                            this.innerHTML = str.replace(match, function (str) {
                                return "<b>" + str + "</b>"
                            });
                            this.style.display = "block";
                            optList[count] = this;
                            count++;
                        } else {
                            this.style.display = "none";
                        }
                    });
                    datalist.style.display = count ? "block" : "none";
                    datalist.style.left = pos.x + "px";
                    datalist.style.top = pos.y + textbox.offsetHeight + "px";
                } else {
                    datalist.style.display = "none";
                }
            }
            function filter(elm) {
                return /li/i.test(elm.tagName) ? elm : null;
            }
            function moveSelect(setp) {
                var sel = datalist.querySelector(".highlight"),
                    index;
                if (sel) {
                    $.each(optList, function (i) {
                        if (sel == this) {
                            index = i;
                            return false;
                        }
                    });
                } else {
                    index = optList.length * -setp;
                }
                index += setp
                if (index < 0) {
                    index = 0;
                } else if (index >= optList.length) {
                    index = optList.length - 1;
                }
                hoverOpt(optList[index]);
            }
            function selectOpt(elm) {
                elm = filter(elm);
                if (elm) {
                    textbox.value = elm.getAttribute("value");
                }
                datalist.style.display = "none";
            }
            function hoverOpt(elm) {
                elm = filter(elm);
                $.each(datalist.children, function () {
                    if (this == elm) {
                        $.addClass(this, "highlight");
                    } else {
                        $.delClass(this, "highlight");
                    }
                });
            }
            datalist.addEventListener("mouseover", function (e) {
                hoverOpt(e.target);
            });
            datalist.addEventListener("click", function (e) {
                selectOpt(e.target);
            });
        }
        document.realy(function ($) {
            autocomplete("input");
        });
    </script>
    <link href="style/base.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        #wrap {
            padding: 100px;
        }

        .datalist {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            box-shadow: 2px 2px 2px #777;
            border: 1px solid black;
            background: window;
            position: absolute;
            overflow: hidden;
            cursor: default;
            color: menutext;
            z-index: 99999;
            display: none;
            font: menu;
            padding: 0;
            margin: 0;
            behavior: url("PIE.htc");
        }

        :root .datalist {
            behavior: none;
            -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
            -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
        }

        .datalist li {
            line-height: 20px;
            list-style: none;
            font-size: 14px;
            padding: 0 10px;
            display: block;
        }

        .datalist li.highlight {
            background: highlight;
            color: highlighttext;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <input type="email" list="url_list" autofocus>
        <datalist id="url_list">
            <option label="gucong@gmail.com" value="mailto:gucong@gmail.com" />
            <option label="gucongbbs@163.com" value="mailto:gucongbbs@163.com" />
            <option label="gucong.student@sina.com" value="mailto:gucong.student@sina.com" />
            <option label="gucong520@hotmail.com" value="mailto:gucong520@hotmail.com" />
            <option label="gucong@foxmail.com" value="mailto:gucong@foxmail.com" />
            <option label="35803719@qq.com" value="mailto:35803719@qq.com" />
            <option label="64272001@qq.com" value="mailto:64272001@qq.com" />
        </datalist>
        <br>
        请输入 gucong 来作为测试数据
    </div>
</body>

</html>

85.

[问答题]
阅读以下 JavaScript 代码：

if (window.addEventListener) {
    var addListener = function (el, type, listener, useCapture) {
        el.addEventListener(type, listener, useCapture);
    };
} else if (document.all) {
    addListener = function (el, type, listener) {
        el.attachEvent("on" + type, function () {
            listener.apply(el);
        });
    };
}

请阐述 a) 代码的功能; b) 代码的优点和缺点; c) listener.apply(el) 在此处的作用;
d) 如果有可改进之处，请给出改进后的代码，并说明理由。

来自：阿里巴巴前端工程师笔试
参考：

1、事件绑定的一个简单函数封装；
2、优点：函数封装可随时引用，没有解决兼容性的问题；缺点：代码冗余
3、作用是改变 this 指向的问题，不用则指向 window 而不是调动它的事件对象

function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
    } else {
        obj.attachEvent('on' + evname, function () {
            fn.apply(obj);
        });
    }
}

86. 实现弹出提示控件

[问答题]
用 js、html、css 实现一个弹出提示控件 :

分别实现类似于系统的 alert、confirm、prompt 对话框；
对话框大小根据提示内容进行自适应（有一个最小宽高），默认出现在页面的水平垂直居中的位置；
对话框可拖动；
对话框中的事件模拟系统对话框的事件（例如：alert 对话框，点击确定按钮，对话框消失）；
解决 IE6 被 select 控件遮挡的问题。

来自：人人网前端开发工程师笔试
参考：

<!DOCTYPE HTML>
<html class="as">

<head>
    <meta charset="utf-8">
    <title>对话框</title>
    <!--[if lt IE 9]>
<script src="../script/base.js"></script>
<![endif]-->
    <link href="style/base.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        #wrap {
            padding: 100px;
        }

        #dialogbg {
            background: rgba(0, 0, 0, .2);
            overflow: hidden;
            position: fixed;
        }

        #dialogbg,
        #dialogbg .bgcolor {
            height: 100%;
            width: 100%;
            margin: 0;
            left: 0;
            top: 0;
        }

        #dialogbg .bgcolor {
            filter: alpha(opacity=20);
            background: #000;
            position: absolute;
        }

        :root #dialogbg .bgcolor {
            display: none;
        }

        * html #dialogbg {
            _position: absolute;
            /* _top: expression(offsetParent.scrollTop); */
        }

        #dialogbg .dialog {
            -webkit-border-radius: 5px 5px 0 0;
            -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
            border: 1px solid #666;
            display: inline-block;
            position: absolute;
            background: white;
            text-align: left;
            overflow: hidden;
            margin: auto;
            left: 50%;
            top: 50%;
            behavior: url("PIE.htc");
            *behavior: none;
        }

        .dialog .title {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            filter:
                progid:DXImageTransform.Microsoft.gradient(startColorstr=#00aaee, endColorstr=#0066cc);
            background: #0095cd;
            background: -webkit-gradient(linear, left top, left bottom, from(#00aaee), to(#0066cc));
            background: -webkit-linear-gradient(top, #00aaee, #0066cc);
            background: -moz-linear-gradient(top, #00aaee, #0066cc);
            background: -ms-linear-gradient(top, #00aaee, #0066cc);
            background: -o-linear-gradient(top, #00aaee, #0066cc);
            background: linear-gradient(top, #00aaee, #0066cc);
            text-shadow: 0 0 1px black;
            font-weight: bold;
            line-height: 28px;
            overflow: hidden;
            cursor: move;
            color: white;
            /* *width: expression(this.parentNode.clientWidth); */
        }

        .dialog .title div {
            padding: 0 8px;
        }

        .dialog .text,
        .dialog .content {
            margin: 20px;
        }

        .dialog .text {
            text-align: center;
        }

        .dialog .content {
            word-break: keep-all;
            white-space: nowrap;
        }

        .dialog input,
        .dialog .content {
            min-width: 200px;
            _width: 200px;
        }

        .dialog input {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            width: 100%;
            *width: auto;
        }

        .dialog .btns {
            text-align: center;
            margin: 10px 5px;
        }

        .dialog .btns * {
            border: 1px solid #CCC;
            text-decoration: none;
            background: none;
            padding: 5px 20px;
            margin: 0 5px;
            color: #000;
        }

        #dialogbg,
        .dialog,
        .dialog .winbtns .size,
        .dialog input {
            display: none;
        }

        #dialogbg,
        .dialog {
            display: block;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <select class="select">
            <option>看看有没有遮住对话框</option>
            <option>看看有没有遮住对话框</option>
            <option>看看有没有遮住对话框</option>
        </select>
        <br>
        请点击下面的链接弹出对框框
        <br>
        <a href="javascript:msgbox('你好，欢迎使用 Windows 8 旗舰版')">alert</a>
        <br>
        <a href="javascript:msgbox(' 您 确 定 要 关 闭 计 算 机
吗?',function(t){alert(t)})">confirm</a>
        <br>
        <a href="javascript:msgbox(' 请 输 入 您 的 姓 名 ',function(t){alert(t)},' 匿 名
')">prompt</a>
    </div>
    <script>
        function msgbox(msg, fun, text) {
            var dialogbg = document.querySelector("#dialogbg");
            if (!dialogbg) {
                dialogbg = document.createElement("div");
                dialogbg.id = "dialogbg";
                document.body.appendChild(dialogbg);
            }
            dialogbg.innerHTML = '<div class="bgcolor"></div><div class="dialog"><div class="title" unselectable="on"><div>消息</div></div><div class="content"></div><div class="text"><input type="text"></div><div class="btns"><button class="ok">确定</button><button class="cancel">取消</button></div></div>';
            dialogbg.querySelector(".content").innerHTML = msg || "&nbsp;";
            function hide(sel) {
                dialogbg.querySelector(sel).style.display = "none";
            }
            var btnOk = dialogbg.querySelector(".ok"),
                btnCancel = dialogbg.querySelector(".cancel");
            if (fun) {
                if (text == undefined) {
                    hide(".text");
                    btnOk.onclick = function () {
                        fun(true);
                    }
                    btnCancel.onclick = function () {
                        fun(false);
                    }
                } else {
                    var textbox = dialogbg.querySelector("input");
                    textbox.value = text;
                    btnOk.onclick = function () {
                        fun.call(textbox, textbox.value);
                    }
                }
            } else {
                hide(".cancel");
                hide(".text");
            }
            function btnClose() {
                dialogbg.style.display = "none";
            }
            btnOk.addEventListener("click", btnClose, true);
            btnCancel.addEventListener("click", btnClose, true);
            dialogbg.style.display = "block";
            var dialog = dialogbg.querySelector(".dialog");
            dialog.style.left = (dialogbg.offsetWidth - dialog.offsetWidth) / 2 + "px";
            dialog.style.top = (dialogbg.offsetHeight - dialog.offsetHeight) / 2 + "px";
            drag(dialog, dialog.querySelector(".title"));
        }
        function drag(dialog, titleBar) {
            var onDrag,
                pos = {},
                dialogbg = document.querySelector("html");
            titleBar.addEventListener("mousedown", function (e) {
                pos.left = dialog.offsetLeft;
                pos.top = dialog.offsetTop;
                pos.x = e.pageX;
                pos.y = e.pageY;
                onDrag = true;
            }, false);
            dialogbg.addEventListener("mousemove", function (e) {
                if (onDrag) {
                    dialog.style.left = (pos.left + e.pageX - pos.x) + "px";
                    dialog.style.top = (pos.top + e.pageY - pos.y) + "px";
                }
            }, false);
            titleBar.onselectstart = function () {
                return false;
            }
            dialogbg.onmouseup = function () {
                onDrag = false;
            }
        }
    </script>
</body>

</html>

87. js返回值

[单选题]
JavaScript 中 document.getElementById 的返回值的类型为？
A.Array
B.Object
C.String
D.Function

来自：微博
答案：B

88. 显示电脑当前时间

[问答题]
在网页里显示一个 div 浮层，位于网页正中，该浮层内的文本显示用户电脑当前时间，
格式 YYYY-MM-DD hh:mm:ss，如 2013-08-16 10:22:05。浮层居中可以使用 JavaScript 或者 CSS
实现。

来自：腾讯
参考：

<!DOCTYPE html>
<html>

<head lang="ch">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .container {
            display: table;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .time {
            vertical-align: middle;
            display: table-cell;
        }
    </style>
</head>

<body>
    <div class="container">
        <span id="time" class="time"></span>
    </div>
</body>
<script>
    function TwoDigit(args) {
        return args < 10 ? "0" + args : args;
    };
    var String
    var dom = document.getElementById("time")
    with (new Date()) {
        String = getFullYear() + " 年 " + TwoDigit(getMonth() + 1) + " 月 " +
            TwoDigit(getDate()) + "日" + TwoDigit(getHours()) + "时" + TwoDigit(getMinutes()) + "分
        "+TwoDigit(getSeconds()) + "秒"; 
    };
    dom.innerHTML = String;
</script>

</html>

89. 输入框验证控件

[问答题]
请用 JavaScript 实现，控制一个文本框只能输入正整数，如输入不符合条件则文本框全部字体标红。要求写出完整的文本框 HTML 代码和 JavaScript 逻辑代码。

来自：腾讯
参考：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script type="text/javascript">
        function isNum() {
            var txtField = document.getElementById('txt');
            var txt = txtField.value;
            var regexp = /^\d*$/;
            if (regexp.test(txt)) {
                txtField.style.color = "#000";
            } else {
                txtField.style.color = "#f00";
            }
        }
    </script>
</head>

<body>
    <input id="txt" type="text" onKeyUp="isNum();" />
</body>

</html>

90. 作用域

[问答题]
以下代码输出的值为？（）

function f1() {
    var n = 100;
    nAdd = function () {
        n += 1
    }
    function f2() {
        alert(n);
    }
    return f2;
}
var result = f1();
result();
nAdd();
result();

来自：搜狐
答案：100 undefined 101

~~今天的基础题完成~~

Ashy-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript面试题81-90

JavaScript面试题81-90每日坚持学10道题81.[问答题]尝试实现注释部分的 Javascript 代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：var Obj = function (msg) { this.msg = msg; this.shout = function () { alert(this.msg); } this.waitAndShout = function () { //
复制链接

扫一扫