阿里巴巴17实习生招聘编程题目(JavaScript解法)
题目:完成一个类似于自己编写的选择框。30分钟瞎写了一通,后来整理代码如下。
原型题目 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>body</title> <style> /* your code here */ </style> </head> <body> <div id="select"></div> <script> function select(options){ // your code here } // eg select({ srcNode: '#select', data: ['北京','上海','杭州'], onChange: (ev)=>{ console.log(ev.value); } }) </script> </body> </html>
其中 youcodehere则为自己编写代码部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>阿里巴巴17校招测试题目</title> <style type="text/css"> *{padding: 0;margin: 0;} ul{border: 1px solid #ccc;display: none;} ul li{list-style: none;cursor: pointer;} body{font-family: "微软雅黑";font-size: 14px; padding: 100px;} .select{width: 100px;height: 14px; } .select input{width: 98%;height:100%;text-indent: 0.5em;margin-left: -1px;margin-top: -1px;} </style> </head> <body> <div class="select" id="select"></div> </body> <script type="text/javascript"> function select(options){ //获取DIV对象 var seleDom = document.getElementById(options.srcNode.replace("#","")); //构造DIV内部元素 var html = "<input/><ul>" var datas = options.data; for (i=0;i<datas.length;i++) { html+="<li>"+datas[i]+"</li>"; } html+= "</ul>"; //DIV添加 seleDom.innerHTML = html; //单击INPUT框时,修改DISPALAY //获取INPUT对象 var inputobj = document.getElementsByTagName('input'); var input = inputobj[0]; //获取UL对象 var ulDom = document.getElementsByTagName('ul'); input.onfocus = function(e){ //显示 ulDom[0].style.display ="block"; //为每一个LI绑定点击事件 var liDoms = document.getElementsByTagName('li'); for (i=0;i<liDoms.length;i++) { liDoms[i].onclick = function(e){ e.value = this.innerHTML; options.onChange(e,input); //点击后取消DISPLAY ulDom[0].style.display ="none"; } } } }; // eg select({ srcNode: '#select', data: ['北京','上海','杭州'], onChange:function(ev,input){ input.value = ev.value; } }); </script> </html>
此版本为JS版本,明天上传JQ版本的解法