试做前端笔试题

1.

实现如下图所示的布局，要求：

1. sidebar 固定宽度200px，content和header宽度自适应；
2. 当window宽度小于600px时，变成三行布局。

默认如下

宽度小于600px时如下

下面是html结构：

<div class='header'>
    <h1>header</h1>
</div>
<div class="sidebar>
    <h1">sidebar"</h1>
</div>
<div class="content">
    <h1>content</h1>
</div>

请写出其css代码：（提示，可以使用media query来检测浏览器窗口宽度）

解答：

 h1{
	    	margin:0;
	    }
	    div{
	    	height:100px;
	    }
	    div:nth-of-type(n+2){
           margin-top:20px;
	    }
        .header{
          background-color: red;
        }
        .sidebar{
          background-color: green;
          width: 200px;
          float:left;
          
        }
        .content{
          background-color: blue;
          margin-left: 210px;
          
        }
        @media screen and (max-width: 600px){
        	.sidebar{
        	  float:none;
              width: auto;
        	}
        	.content{
        		margin:auto
        	}
        }

2.

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推。

var body=document.getElementsByTagName('body')[0];
       var links=document.getElementsByTagName('a');
       var len=links.length;
       function foo(event){
       	event=event?event:window.event;
        var tagName=event.target.tagName.toLowerCase();
        if((tagName==='a'||tagName==='area')&&event.target.href){
        	for(var i=0;i<len;i++){
        		if(event.target===links[i]){
                   alert(i+1);
        		}
        	}
        }
       }
       body.addEventListener('click',foo,false);

window.onload= function (){

var l=document.links.length

for ( var i=0;i<l;i++){

document.links[i].onclick=( function (x){

return function (){

alert(x+1);

}

})(i);

}

 

}

3.

题目：

(new Date).getTime() 和 +new Date() 都可以取到当前时间戳，它们的实现原理是什么，哪个效率更高？

第一种写法所耗的时间基本上只有第二种写法的一半，Date.getTime 发现这个函数本身实际上等价于valueOf，第一种方法实际上直接调用了valueOf ，而第二种方法涉及到JS内部的类型转换，尽管最终的结果也是调用了valueOf 函数，但是毕竟有个转换的过程，所以效率理应比前者要来的低下吧

x+""  //等价于String(x)

+x   //等价于Number(x)

!!x   //等价于Bollean(x)

4

题目：

请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。

function getParents(elem){
          var matched=[];
          while(elem&&elem.nodeType!==9){
              elem=elem.parentNode;
           matched.push(elem.tagName);
          }
          return matched;
       }

5.

有两个盒子 A、B，B 在 A 盒子中，它们的 css 是这么定义的：

A {
    position:relative;
    width:500px;
    height: 500px;
    background-color:green;
}
B {
    position:absolute;
    max-width:300px;
    max-height:300px;
    background-color:blue;
}

#a{
   position: relative;
   width: 400px;height: 400px;
   background-color: green;
}
#b{
   position: absolute;
   max-width: 300px;
   max-height: 300px;
   background-color: blue;
   top:0;right:0;left:0;bottom:0;
   margin:auto;
}