人人网前端工程师笔试卷-2011年-k6k4.com

1. 在页面的固定区域内实现图片的展示(使用原生代码实现，不可使用任何框架)。

每点击一次右箭头，图片区域向左滚动出一张图片，反之相同
当发现图片滚动到末尾时，响应的箭头变成不可点击状态
鼠标在图片区域内滑动滚轮，图片会随着鼠标滚轮的方向进行响应的滚动

参考答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js slide</title>
    <style type="text/css">
    *{padding: 0; margin: 0;}
    #slide{
        width: 960px; height: 160px; position: relative; margin: 30px auto; border: 1px solid #ccc;
    }
    #slide .content{width: 960px;  height: 160px; overflow: hidden; position: relative;}
    #slide ul{
        position: absolute;
        -webkit-transition:all .27s ease-in;
        -moz-transition:all .27s ease-in;
        -o-transition:all .27s ease-in;
        transition:all .27s ease-in;}
    #slide li{list-style: none; float: left; width: 140px; height: 140px; margin: 10px; background: #c1c1c1; overflow: hidden;}
    #slide .next,#slide .prev{position: absolute;  width: 28px; height: 28px; background: #999; overflow: hidden;}
    #slide .next{right: -28px; top: 66px;}
    #slide .prev{left: -28px; top: 66px;}
    </style>
</head>
<body>
    <div id="slide">
        <div class="content">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
            </ul>
        </div>
        <a class="next" id="next" href="javascript:;">next</a>
        <a class="prev" id="prev" href="javascript:;">prev</a>
    </div>
    <script type="text/javascript">
    var obj = document.getElementById('slide');
    var next = document.getElementById('next'),
        prev = document.getElementById('prev'),
        ul = obj.getElementsByTagName('ul')[0],
        liArr = obj.getElementsByTagName('li'),
        li_width = liArr[0].offsetWidth + 20,
        li_length = liArr.length,
        show_length = 6,
        index = 0;
    function slide(){
        ul.style.width = li_width * li_length + 'px';
        ul.style.left = 0;
    }
    function animation(){
        if(index <= 0){
            prev.style.cursor = 'default';
            next.style.cursor = 'pointer';
            index = 0;
        }else if(index >= (li_length - show_length)){
            prev.style.cursor = 'pointer';
            next.style.cursor = 'default';
            index = (li_length -show_length);
        }
        var goal = li_width * -index;
        ul.style.left = goal + 'px';
    }
    obj.onmousewheel = function(e){ 
        var d = parseInt(e.wheelDelta)> 0 ? 1:-1;  //判断滚动方向
        index += 1*d;
        animation();
    }
    next.onclick = function(e){
        var target = e.target;
        prev.style.cursor = 'pointer';
        index += 1;
        animation();
    }
    prev.onclick = function(e){
        var target = e.target;
        next.style.cursor = 'pointer';
        index -= 1;
        animation();
    }
    slide();
    </script>
</body>
</html>

2. 实现 input 输入框的自动匹配

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

参考答案：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>input</title>      
        <style>
            *{
                margin:0;
                padding:0;
            }
            #frm{
                width:300px;
                margin:100px auto;
                border:1px solid #eee;
            }
            #put{
                width:200px;
                height:30px;                
            }
            #sh{
                width:200px;
                border:1px solid red;               
            }
            #sh li{
                list-style:none;
            }
        </style>
        <script>
            window.onload=function(){
                var frm=document.getElementById("frm");
                var input=document.getElementById("put");
                var ul=document.getElementById("sh");
                //alert(input.offsetLeft);
                //alert(input.offsetTop);
                ul.style.position="absolute";
                ul.style.top=(input.offsetTop+33)+'px';
                ul.style.left=input.offsetLeft+'px';
                ul.style.height='200px';
                var arr=["a","aa","aaa","b","bb","bbb"];
                //alert(input.value);              
                input.onkeyup=function(){
                //根据输入匹配，并将所有匹配显示出来
                    ul.innerHTML="";
                    var str=input.value;
                    //alert(str);
                    var regStr = eval("/^"+str+"+/");
                    for(var i=0;i<arr.length;i++){
                        //alert(arr[i]);
                        if(regStr.test(arr[i])){
                            //alert(arr[i])
                            var li=document.createElement("li");
                            //alert(li);
                            //匹配的部分内容变粗
                            var len=str.length;
                            var string=arr[i].substr(len);
                            li.innerHTML='<strong>'+str+'</strong>'+string;
                            //alert(li.innerText);
                            ul.appendChild(li);
                            //alert("sd");
                        }
                    } 
                                      
                    //用鼠标选择li中的内容，并把input的内容替换为选中的值
                    var lis=document.getElementsByTagName("li");
                        //alert(lis.length);
                    for(var j=0;j<lis.length;j++){
                            lis[j].onmouseover=function(){
                                this.style.backgroundColor="#eee";
                            }
                            lis[j].onmouseout=function(){
                                this.style.backgroundColor="#fff";
                            }
                            lis[j].onclick=function(){
                            //alert(this.innerHTML);
                                input.value=this.innerText||this.textContent;
                            }
                    }   
                }                        
            }
        </script>
    </head>
    <body>   
        <form id="frm">
            <input type="text" name="put" id="put" value="haha" />
        </form>       
        <ul id="sh">
        </ul>       
    </body>
</html>

3. 用 js、html、css实现一个弹出提示控件

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

参考答案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            body{font-family:"Microsoft yahei"}
            p,input{margin:0;padding:0;}
            .p{font-size:15px;font-family:"Microsoft yahei";}
            .div{position: absolute;display:none;width: 318px;background: rgb(251,251,251);border-radius:3px;border: 1px solid rgb(186,186,186);box-shadow: 0px 2px 2px #999;padding:15px 20px;}
            .span{position:absolute;right:5px;top:5px;}
            .div2{margin-top:28px;}
            .ipt1{font-weight:bold;font-family:"Microsoft yahei";font-size:12px;border:1px solid rgb(59,123,237);padding:7px 23px;background:rgb(252,252,252);border-radius:2px;}
            .ipt2{margin-left:10px;border:1px solid rgb(165,165,165);}
            .act_ipt{border:1px solid rgb(59,123,237);}
            .p1{font-size:12px;word-break:break-all;}
            .p2{text-align:right;margin-top:25px;}
            .ipt_text{width:100%;font-size:14px;padding:2px;border:1px solid rgb(59,123,237);}
            .p1_2{margin-top:10px;}
        </style>
    </head>
    <body>
        <input type="button" value="alert"/>
        <input type="button" value="confirm"/>
        <input type="button" value="prompt"/>
        <div id="div1" class="div">
            <p class="p">JavaScript 提醒</p>
            <span class="span" id="span1"><img src="images/1.png"/></span>
        <div class="div2" id="div2">
        </div>
    </div>
    <script>
        var oDiv=document.getElementById('div1');
        var oDiv2=document.getElementById('div2');
        var oSpan1=document.getElementById('span1');
        var aIpt=document.getElementsByTagName('input');
        function t(obj)
        {
            obj.onmousedown=function(ev){
            var choose=ev||event;
            var disX=choose.clientX-obj.offsetLeft;
            var disY=choose.clientY-obj.offsetTop;
            function mouseMove(ev){
                var choose=ev||event;
                var l=choose.clientX-disX;
                var t=choose.clientY-disY;
                if(l<0){l=0;}
                else if(l>document.documentElement.clientWidth-obj.offsetWidth){l=document.documentElement.clientWidth-obj.offsetWidth;};   
                if(t<0){t=0}
                else if(t>document.documentElement.clientHeight-obj.offsetHeight)
                {t=document.documentElement.clientHeight-obj.offsetHeight};    
                obj.style.left=l+'px';
                obj.style.top=t+'px';
                obj.style.margin=0;
            }
            function mouseUp(){
                this.onmousemove=null;
                this.onmouseup=null;
                if(obj.releaseCapture){obj.releaseCapture();}
            }
            if(obj.setCapture){
                obj.onmousemove=mouseMove;
                obj.onmouseup=mouseUp;
                obj.setCapture();
            }
            else{document.onmousemove=mouseMove;
                document.onmouseup=mouseUp;
            }
            return false;
        }
    }
    for(var i=0;i<aIpt.length;i++)
    {
        aIpt[i].onclick=function()
        {    
            if(this.value=="alert")
            {    
                oDiv2.innerHTML="<p class='p1'>1111111111</p><p class='p2'><input id='click' class='ipt1' type='button' value='确定'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
                var c=document.getElementById('click');
                c.onclick=function()
                {
                    oDiv.style.display="none";
                }       
            }
            if(this.value=="confirm")
            {
                oDiv2.innerHTML="<p class='p1'>您确定要离开本页吗？</p><p class='p2'><input id='click2' class='ipt1 ipt2 act_ipt' type='button' value='确定'/><input id='click3' class='ipt1 ipt2' type='button' value='取消'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
                var d=document.getElementById('click2');
                var f=document.getElementById('click3');
                d.onclick=function()
                {
                    oDiv.style.display="none";    
                    alert(true)
                }
                f.onclick=function()
                {    
                    oDiv.style.display="none";
                    alert(false)
                }       
            }
            if(this.value=="prompt")
            {
                oDiv2.innerHTML="<p class='p1'>您的姓名是？</p><p class='p1_2'><input type='text' class='ipt_text' id='text'/></p><p class='p2'><input id='click4' class='ipt1 ipt2' type='button' value='确定'/><input id='click5' class='ipt1 ipt2' type='button' value='取消'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
                var e=document.getElementById('click4');
                var h=document.getElementById('click5');
                var w=document.getElementById('text');
                e.onclick=function()
                {
                    oDiv.style.display="none";    
                    alert(w.value)
                }
                h.onclick=function()
                {
                    oDiv.style.display="none";
                    alert("")
                }
                oDiv.style.display="none";
            }
            with(oDiv.style)
            {
                display="block";
                left="50%";
                top="50%";
                marginTop="-"+oDiv.offsetHeight/2+'px';
                marginLeft="-"+oDiv.offsetWidth/2+'px';
            }        
            oSpan1.onclick=function()
            {
                oDiv.style.display="none";
            }
        }
    }
    t(oDiv);
    </script>
    </body>
</html>

4. 在页面上实现一个二级菜单控件

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

参考答案：

利用Qt Creator可以很容易的实现该功能

只需设置一个信号与槽函数（类似于回调机制），将槽函数与页面目的元素绑定，当点击页面某元素时，该元素即会发送送好，调用槽函数显示菜单；
只需设置页面与菜单之间的相对位置，即可控制菜单的显示位置
针对1级菜单栏设置MouseEvent,当鼠标移动到相应位置，即通过鼠标事件调用二级菜单显示函数，对于二级菜单，则同样设置MouseEvent,当点击左键时调用相应菜单的槽函数。

5. 实现一个所见即所得编辑器. 需提供以下功能：

字体加粗；
文本左对齐、右对齐、居中 3. 设置字体；
设置字号；
设置字体颜色；
插入超链接；
插入图片。

个人资料

Bingo
等级：9
文章：694篇
访问：38.9w
排名： 1

推荐圈子

人人网笔试面试圈