2017阿里前端测试题（div模拟下拉列表）

最新推荐文章于 2021-06-13 20:24:09 发布

clayja

最新推荐文章于 2021-06-13 20:24:09 发布

阅读量966

点赞数 1

分类专栏：其他文章标签：前端测试阿里

本文链接：https://blog.csdn.net/clayja/article/details/62238205

版权

其他专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>body</title>
  <style>
	  #select{
	  	border: 1px rgb(221,221,221) solid;
	  	width: 120px;
	  	height: 20px;
	  	text-align: center;
	  }
	  .selectNode{
	  	position: relative;
	  	left: -1px;
	  	border: 1px rgb(221,221,221) solid;
	  	width: 120px;
	  	height: 20px;
	  }
	  .selectNode:hover{
	  	background-color: rgb(221,221,221);
	  	cursor: default;
	  }
	  .cursor {
         animation: blink 1s infinite;
         position: relative;
         top: -2px;
         left:-58px;
      }
		@keyframes blink {
		    0%, 100% {
		        color: black;
		    }
		    50% {
		        color: white;
		    }
		}
  </style>
</head>
<body>
  <div id="select"></div>

  <script>
	function select(options){
	  // your code here
	  //获取节点
	  var node = document.getElementById(options.srcNode.replace(/#/,""));
	  //点击事件
	  node.onclick = function(){
	  	var cursor,span,selectNode,textNode,sNodeLen;
	  	//删除子元素
	  	while(node.hasChildNodes())
		    {
		        node.removeChild(node.firstChild);
		    }
		//光标
	  	cursor = document.createTextNode("|"); 
  		span = document.createElement("span"); 
  		span.appendChild(cursor);
        span.setAttribute("class", "cursor");  
        node.appendChild(span);
        //开始添加动态子元素并绑定事件
        sNodeLen = document.getElementsByClassName("selectNode").length;
	  	if (sNodeLen == 0) 
	  	{
	  		options.data.forEach(function(item){
	  		textNode = document.createTextNode(item); 
	  		selectNode = document.createElement("div"); 
	  		selectNode.appendChild(textNode);
            selectNode.setAttribute("class", "selectNode");  
            node.appendChild(selectNode);
            //绑定事件
            selectNode.onclick = function(e){
            	//阻止冒泡事件
            	e.stopPropagation();
            	while(node.hasChildNodes())
			    {
			        node.removeChild(node.firstChild);
			    }
                node.appendChild(document.createTextNode(this.firstChild.nodeValue));
            } 
	  	    });
	  	}
	  	
	  };
	}
	
	// eg
	select({
	  srcNode: '#select',
	  data: ['北京','上海','杭州'],
	  onChange: (ev)=>{
	    console.log(ev.value); 
	  }
	})
  </script>
</body>
</html>

clayja

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017阿里前端测试题（div模拟下拉列表）

body #select{ border: 1px rgb(221,221,221) solid; width: 120px; height: 20px; text-align: center; } .selectNode{ position: relative; left: -1px; border: 1px rgb
复制链接

扫一扫