前端笔试题集合（一）

No.1

下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知HTML结构是：

<div class="box">
<div class="item">column 1</div>
<div class="item">column 2</div>
<div class="item">column 3</div>
</div>

答案：

.box{
               width:100%;
               background:green;
               display:-moz-box; /* Firefox */
               display:-webkit-box; /* Safari and Chrome */
               display:box;                                                                        
               -webkit-box-orient:horizontal;
}
.item{
                -moz-box-flex:1; /* Safari 和 Chrome */
                -webkit-box-flex:1; /* Safari 和 Chrome */
                box-flex:1; /* Safari 和 Chrome */
                height:60px;
                background:red;
                margin:10px 0 ;        
        }
.item:first-child{
                background:red;
                width:200px;
                -webkit-box-flex:0; /* Safari 和 Chrome */
                margin:10px;
                
        }
.item:last-child{
                background:red;
                margin:10px;        
        }

View Code

主要考察的是CSS3的flex属性及伪类选择器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
        <title>第1题</title>
        <style type="text/css">
                *{padding:0px;margin:0px;}
                .box{display:flex;padding:10px;background:#679396;}
                .item{background:#EEEEEE;padding:10px;}
                .item:first-child{width: 200px;}
                .item:nth-child(2),.item:last-child{flex:1;margin-left:10px;}
        </style>
</head>
<body>
        <div class="box">
                <div class="item">column 1</div>
                <div class="item">column 2</div>
                <div class="item">column 3</div>
        </div>
</body>
</html>

View Code

No.2

请用html5标准完成以下页面布局（要求完整书写整个页面的html代码，不需要写CSS）

答案：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>头部</header>
<nav>导航</nav>
<article>
    <aside>侧边栏</aside>
    <hgroup>内容区</hgroup>
</article>
<footer>尾页</footer>
</body>
</html>

View Code

No.3

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

答案：

<!DOCTYPE html>
<html lang="en" >
 <head> 
    
    <title>demo</title>
    
 </head>
 <body >
    <div >
        <div id="test"> </div>
        <div></div>
    </div>

    <script type="text/javascript">
        var getParents=function(id){
            var dom=id.parentNode;
            while(dom.tagName){
                    document.write(dom.tagName);
                    dom=dom.parentNode;    
            }
            return dom;    
        }
        getParents(test);
    </script>
 </body>
</html>

View Code

No.4

实现如下图所示的布局
要求：
sidebar 固定宽度200px，content和header宽度自适应
当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代码：

No.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;
}

如何实现 B 在 A 中水平方向和垂直方向居中

答案：

No.6

经常在SNS中看到如下图所示的功能：

请通过代码完成它，它至少应该：
1. 良好结构、语义化的HTML
2. 兼容主流的浏览器；
3. JS应该包括： 1) 实时计数功能 2)校验字数限制 3) 防止重复提交；
4. 如果时间所限，无法100%，但请说明实现方案及思路；

No.7

//现有代码如下:

function test() {
var a = 1;
setTimeout(function() {
alert(a);
a = 3;
}, 1000);
a = 2;
setTimeout(function() {
alert(a);
a = 4;
}, 3000);
}
 
test();
alert(0);

//请注意,代码中有三处alert.他们分别会alert出什么值,时间上的顺序是怎样的?
//请详述得到这个答案的原因,特别是test函数的局部变量a是对运行结果的影响.

答案：

按顺序分别会alert2 3 0，时间顺序为 3 1 2。

No.8

当我们使用CSS3新属性，比如：box-shadow或者transition时，我们怎么检测浏览器是否支持这些属性？
请设计一个JavaScript函数，该函数接受一个CSS属性名作为参数，并返回一个boolean值，表明浏览器是否支持这个属性。

Step 1：

我们首先需要确定的一件事是，该如何调用这个函数。我们应该把事情想得简单一点。

if ( supports('textShadow') ) {
    document.documentElement.className += ' textShadow';
}

这就是最终要调用的方法，当我们传入的CSS属性名到这个supports()函数时，他会返回一个boolean值，如果是true，我们就会加一个class在<html>上面，被这个class勾到的样式就会被执行。

Step2：

接下来我们准备构造这个supports()函数。

var supports = (function() {

})();

为什么我们不把这个supports 写成一个标准的function呢？原因是在这个方法执行之前需要做一系列准备的事情，而绝不可能每次调用这个function时反复的去做这些。所以，最好让supports 指向一个有返回值的自执行函数。

Step3：

为了测试浏览器是否支持这个特殊的属性，我们需要创建一个虚拟的元素。这个元素不会被插入到DOM树种，他只是一个用来做测试的傀儡。

var div = document.createElement('div');

这时你是否已经意识到了在使用CSS3属性时我们会使用一系列的前缀。

-moz
-webkit
-o
-ms
-khtml
在javascript里，我们必须得去遍历它们，所以我们这它们放到一个数组里面，把这个数组起名叫做vendors。

var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' ');

“使用split()函数把字符串转化为一个数组是一种懒惰的办法，但是他确实很高效”

接下来我们准备遍历这个数组。我们都是好孩子，所以要养成缓存数组长度的好习惯。

var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;

这就是前期要做的事情，不需要每次调用supports()时都再执行一遍。页面加载以后它只执行一次。

return function(prop) {

};

“这个闭包的好处在于尽管supports()是一个有返回值的function，它仍然可以访问到div、vendors和len变量”

Step4：

马上就测试一下：如果这个传入的属性是div的style中有的变量，我们就认为这个浏览器支持这个属性；所以返回true。

return function(prop) {
    if ( prop in div.style ) return true;
};

仔细想一下，现在主流浏览器都直接支持text-shadow了，而不需要那个前缀。对于这些浏览器就没必要遍历那个前缀数组了，这就是为什么我们把这个检查过程放到第一行。

Step5：

大家都习惯写CSS3的属性名字类似这样-moz-box-shadow，然而在firebug里面你去看style对象，你就会发现他被写成MozBoxShadow，像这样的，如果我们测试

'mozboxShadow' in div.style // false

返回false，这就说明这个值是大小写敏感的。

这就意味着我们传入boxShadow 到supports()中，将会失败。所以我们需要事先检查一下传入参数第一个首字母是不是小写的，这样我们就修复了这个问题。

if(prop in div.style) return true;
  prop = prop.replace(/^[a-z]/, function(val) {
    return val.toUpperCase();
  });
};

正则表达式解决了这个问题，我们检查这个字符串的首字母是不是小写，如果是则转换成大写字母。

Step6：

我们接下来需要遍历这个vendors数组。假如传入的是box-shadow，我们需要检测div的style对象中是否存在下面其中的一个。
MozBoxShadow
WebkitBoxShadow
MsBoxShadow
OBoxShadow
KhtmlBoxShadow
如果存在，将会返回true，说明该浏览器支持boxshadows。

return function(prop) {
  if ( prop in div.style ) return true;
  prop = prop.replace(/^[a-z]/, function(val) {
    return val.toUpperCase();
  });
  while(len--) {
    if ( vendors[len] + prop in div.style ) {
      return true;
    }
  }
};

在这里我们没有必要使用for来遍历这个数组，原因如下：

1. 数组元素的顺序不重要
2. while字符少，写的快
3. while相对for性能好一点点

不要被vendors[len] + prop搞晕，他只是简单地取代那些名字和他们的真实值：MozBoxShadow

Step7：

但是，如果没有一个值匹配到呢？在这种情况下，浏览器似乎不支持这个属性，所以需要返回false。

while(len--) {
  if ( vendors[len] + prop in div.style ) {
    return true;
  }
}
return false;

我们测试一下text-stroke（只有webkit内核浏览器支持），如果通过的话就会在<html>上加一个class。

Step8：

如果一个class名字恰好被勾上，我们在样式表中可以这么写：

/* fallback */
h1 {
  color: black;
}
/* text-stroke support */
.textStroke h1 {
  color: white;
  -webkit-text-stroke: 2px black;
}

最终的源代码

var supports = (function() {
  var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

  return function(prop) {
    if ( prop in div.style ) return true;

    prop = prop.replace(/^[a-z]/, function(val) {
      return val.toUpperCase();
    });

    while(len--) {
      if ( vendors[len] + prop in div.style ) {
        // browser supports box-shadow. Do what you need.
        // Or use a bang (!) to test if the browser doesn't.
        return true;
      }
    }
    return false;
  };
})();

if ( supports('textShadow') ) {
  document.documentElement.className += ' textShadow';
}