2017腾讯实习内推面试题

重点考察：原生代码的掌握能力，兼容性方面只做了下简单的样式统一，原生JS的兼容性比较好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*公共样式区域*/
        ul,li{margin:0;padding:0;}
        li{list-style: none;}
        .hide{display: none;}
        .show{display: block;}

        .wrap{position: relative;width:400px;margin:300px auto;}
        .searchItem input{width:400px;height:30px;font-size:16px;color:#333;line-height:30px;text-indent: 5px;
            border-radius: 5px;outline: none;border:1px solid #333;}
        ul{border: 1px solid #999;position: absolute;top:33px;left:0;}
        ul li{width:400px;height:30px;line-height: 30px;}
        ul li:hover{background: #ccc;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="searchItem">
        <input id="inpBox" type="text"/>
    </div>
    <ul class="hide">
    </ul>
</div>
<script>
    window.onload = function () {
        var arr=['aaa','abc','avv','dda','dss','css'];
        var inpBox = document.getElementById('inpBox');
        var oUl = document.getElementsByTagName('ul')[0];
        var aLi = oUl.children;
        inpBox.oninput = function () {
            oUl.innerHTML = ""; //防止重复出现列表
            oUl.setAttribute('class','show');
            var s = this.value.charAt(0);
            //对数组中的值进行匹配
            for(var i=0;i<arr.length;i++){
                if(arr[i][0]==s){
                    var oLi = document.createElement('li');
                    oLi.innerHTML = arr[i];
                    oUl.appendChild(oLi);
                }
            }
            //符合条件的li选中动作
            for(var j=0;j<aLi.length;j++){
                aLi[j].onclick = function () {
                    inpBox.value = this.innerHTML;
                    oUl.setAttribute('class','hide');
                }
            }
        };
    }
</script>
</body>
</html>

 

posted @ 2017-08-28 11:36  哼小调C  阅读(133)  评论(0)    收藏  举报