面试的javascript题目

最新推荐文章于 2024-08-11 18:40:36 发布

ddback

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量303

点赞数

分类专栏： javascirpt/css 文章标签： javascript 面试 div class wrapper function

本文链接：https://blog.csdn.net/ddback/article/details/6712731

版权

javascirpt/css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在网上有人发了个js的面试题目，地址在这里http://www.wfnyg.com/mianshiti.html，自己做了一下第一题，基本实现。

如下：

html：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Dynamic TEST</title>
	<link rel="stylesheet" href="dynamic.css" />
</head>
<body>
   <div id="main">
	   <div id="header">
	      <span>现在一共有：<span id="numberOfItem"></span>
		  个条目</span>
	   </div>
	   <div id="wrapper">
		  <div class="item">
			 <div class="content">都是月亮惹的祸</div>
			 <div class="control">修改</div>
		  </div>
		  <div class="item">
			 <div class="content">你到底爱不爱我</div>
			 <div class="control">修改</div>
		  </div>
		  <div class="item">
			 <div class="content">那就这样吧</div>
			 <div class="control">修改</div>
		  </div>
		  <div class="item">
			 <div class="content">大女人</div>
			 <div class="control">修改</div>
		  </div>
		  <div class="item">
			 <div class="content">你不是真正的快乐</div>
			 <div class="control">修改</div>
		  </div>
		  <div class="item">
			 <div class="content">未命名</div>
			 <div class="control">修改</div>
		  </div>
	   </div>
	   <div id="footer">
		  <div id="add">新增条目</div>
	   </div>
   </div>
   <script src="dynamic.js" type="text/javascript"></script>
</body>
</html>

javacript：

/*className of item*/
var classOfName = {
   "item" : "item",
   "content" : "content",
   "control" : "control"
}

var setClassName = function(element, name){//设置类名
   if (element.class)
      element.class = name;
   else	  
      element.className = name;
}


var Dynamic = {
   wrapper: document.getElementById("wrapper"),
   
   init: function() {
      document.getElementById("numberOfItem").innerHTML = Dynamic.wrapper.children.length;
   },
   //创建
   create: function(){
       var newItem = document.createElement("div");
       setClassName(newItem, classOfName.item);
	   var contentOfItem = document.createElement("div");
	   contentOfItem.innerHTML = "未命名";
	   setClassName(contentOfItem, classOfName.content);
	   var controlOfItem = document.createElement("div");
	   controlOfItem.innerHTML = "修改";
	   setClassName(controlOfItem, classOfName.control);
	   newItem.appendChild(contentOfItem);
	   newItem.appendChild(controlOfItem);
       Dynamic.wrapper.appendChild(newItem);
	   Dynamic.init(); 
   },
   
   //修改或保存
   updateOrsave: function(event){
       var target = event ? event.target : window.event.srcElement;
	   if (target.innerHTML == "修改" || target.innerHTML == "保存"){
		   var content = target.previousElementSibling;
		   if (target.innerHTML == "修改"){
			  target.innerHTML = "保存";
			  var nameOfContent = content.innerHTML;
			  content.innerHTML = "";
			  var input = document.createElement("input");
			  content.appendChild(input);
			  input.setAttribute("value", nameOfContent);
			}else {
			  var contentInput = content.firstElementChild;
			  var newContent = contentInput.value;
			  if (newContent == "") return false;
			  content.removeChild(contentInput);
			  content.innerHTML = newContent;
			  target.innerHTML = "修改";		  
			}
		}
   } 
}

var addEventHandler = {
    addEvent: function(element, type, handler){
	   if (window.addEventListener){
	       element.addEventListener(type, handler, false);
	   }else if (window.attachEvent){
	       element.attachEvent("on" + type, handler);
	   }else{
	       element["on" + type] = handler;
	   }
	},
	removeEvent: function(element, type, handler){
	   if (window.removeEventListener){
	      element.removeEventListner(type, handler, false);
	   }else if (window.detachEvent){
	      element.detachEvent("on" + type, handler);
	   }else{
	      element["on" + type] = null;
	   }
	}
}

function addItemOrUpdate(){
   var addButton = document.getElementById("add");
   var items = document.getElementById("wrapper");
   addEventHandler.addEvent(addButton, "click", Dynamic.create);
   addEventHandler.addEvent(items, "click", Dynamic.updateOrsave);
}

function main() {
   Dynamic.init();
   addItemOrUpdate();
}

main();

css:

html,body{
margin: 0px;
padding: 0px;
}

#main{
margin-left: auto;
margin-right: auto;
margin-top: 150px;
width: 600px;
height: 100%;
font-size: 14px;
font-family: microsoft Yahei; 
}

/*header style*/
#header{
background: #059ED3;
height: 30px;
line-height: 30px;
color: white;
padding-left: 5px;
}

/*item style*/
.item {
border-bottom: 1px solid #E1E1E1;
position: relative;
height: 35px;
}

.content {
position: absolute;
height: 35px;
line-height: 35px;
left: 5px;
}

.control {
position: absolute;
height: 35px;
line-height: 35px;
right: 5px;
color: #003AF7;
cursor: pointer;
}

.control:active{
color: #FF5555;
}

/*footer style*/
#footer{
background: #CCCCCC;
height: 30px;
padding-right: 5px;
}

#add{
font-weight: bold;
color: #008000;
height: 30px;
line-height: 30px;
float: right;
cursor: pointer;
}

ddback

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试的javascript题目

在网上有人发了个js的面试题目，地址在这里http://www.wfnyg.com/mianshiti.html，自己做了一下第一题，基本实现。如下：html： Dynamic TEST 现在一共有：个条目
复制链接

扫一扫

专栏目录