2015校招某度WEB前端笔试题

今天参加了某度的WEB前端笔试，一共八道题，各种不会，很是伤心，感觉某度的题明显很难。试卷上没有写不能泄题，就在这里贴出给大家看看吧。

一、DOCTYPE作用是什么？严格模式和混杂模式是什么？为什么要分这两种模式？

这道题可以参考这篇文章，讲的很细：点击打开链接

二、CSS写一个能实现如下图形的样式，就给了一个div：<div id="demo"></div>.

图形是一个正方形带一个尖角，内部是#fff颜色，边框2px的#0cc颜色，尖角位于右边据上部20px，是一个等腰直角三角形，高10px，底20px。

笔试的时候想了半天，写出来也是错的。回来想了半天，感觉一个div好像做不出来啊！于是又加了几个，上代码：

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width:100px;
height:100px;
border:2px solid #0cc;
position:relative;
background:#fff;
}
#demo1 {
top:20px;
left:110px;
width:0;
height:0;
line-height:0;
border-width:10px;
border-style:solid;
border-color:transparent transparent transparent #0cc;
position:absolute;
}
#demo2 {
top:22px;
left:110px;
width:0;
height:0;
line-height:0;
border-width:8px;
border-style:solid;
border-color:transparent transparent transparent #fff;
position:absolute;
}
</style>
</head><body>
<div id="demo"></div>
<div id="demo1"></div>
<div id="demo2"></div>
</body>
</html>

效果图：

请无视水印。

这道题考察的要点就是border其实是个梯形的知识了。我们可以看一下，将border-width设置为50px时，是什么样的border：

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border-width:30px;
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff #000000;
}
</style>
</head><body>
<div id="demo"></div>
</body>
</html>

效果图：

看到了吧，是三角和梯形。你若将width和height设置为相等时，就是四个三角形了。

另外，还有相对定位和绝对定位的原理，以及你需要用一个小的白色三角形覆盖掉浅蓝色的三角形，以便视觉效果为整个背景都是白色。这就是demo3存在的意义。限定其width为10-2=8px，微调一下位置就可以了。这题好难啊！目前还没有想出一个div怎么实现的方法！

三、document.write和innerHTML的区别是什么？

这个是最简单的了。以前看过，document.write会刷新整个页面的内容，而innerHTML只是找到标签在后面插入一些内容。这篇文章还讲了一些区别：点击打开链接

四、JS实现异步编程的方法有哪些？

首先一下子就想到了callback回调函数，还有就是setTimeOut。另外还有其他的如：XMLHttpRequest对象与script标签的onreadystatechange回调，image的onload与onerror回调，iframe的onload，DOM元素的事件回调，HTML5的跨域消息传送postMessage，QuickTime与flash对象的加载……具体看这篇文章：点击打开链接

五、手机上的网站页面和PC端的显示上有不同，请叙述实现上述技术的原理。

根本不会啊！就蒙了个CSS的hack技术。这东西上网也不好查，就先留着吧！哪位知道请评论给我，多谢！

六、要用网页实现Flappy Bird，需要注意哪些地方？

不会。

七、实现点击表头排序功能，点一次降序，再点一次升序。

网上有很多代码，可以参看。

八、【附加题】你在项目中用到了哪些新技术，遇到的挑战和收获是什么？

不表。

总之，某度的笔试题还是很有难度的，理论与实践相结合，很考验一个人。