2015校招某度WEB前端笔试题

来源：互联网发布：怎么禁止电脑安装软件编辑：程序博客网时间：2024/05/13 23:16

今天参加了某度的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，需要注意哪些地方？

不会。

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

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

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

不表。

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

1 0