人人网JavaScript面试题解析：原生JS实现五大前端组件

本次JavaScript面试题要求从第一至第四题中任选三道，必须使用原生代码实现，严禁使用任何框架。

第五题为选做部分。

图片滚动控件实现

要求每点击一次右箭头，图片区域向左滚动展示一张图片；点击左箭头则向右滚动，逻辑相反。

当图片滚动至末尾时，对应的导航箭头需变为不可点击状态。

当鼠标在图片区域内滚动滚轮时，图片需根据滚轮方向进行相应的滚动操作。

自定义对话框开发

分别实现模拟系统原生样式的alert、confirm和prompt对话框。

对话框尺寸需根据提示内容自适应（设定最小宽高限制），并默认显示在页面的水平与垂直居中位置。

对话框需支持鼠标拖动功能。

需模拟系统对话框的事件行为，例如点击alert对话框的“确定”按钮后，对话框应消失。

需解决IE6浏览器中select控件遮挡对话框的问题。

Input自动匹配菜单

1. 对 input 框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input 框的下方； 2. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗；

支持通过键盘上下箭头键在菜单中进行选择，按下回车键后将选中内容写入input框。

动态二级菜单控件

该控件可绑定至页面任意元素，点击该元素时触发菜单显示。

菜单出现的位置需根据其在页面中的坐标自动调整方向，例如：

当鼠标划过一级菜单元素时，在相应位置弹出二级菜单；

点击二级菜单元素时，需触发相应的事件响应。

所见即所得编辑器

需实现以下编辑功能：

字体加粗；

文本对齐方式支持左对齐、右对齐及居中；

设置字体类型；

设置字号大小；

设置字体颜色；

插入超链接；

插入图片。

答案打包下载。