2015校招某度WEB前端笔试题

最新推荐文章于 2023-07-09 23:35:18 发布

令狐林

最新推荐文章于 2023-07-09 23:35:18 发布

阅读量1.8k

点赞数 2

分类专栏： CSS JS 文章标签： web前端笔试题

本文链接：https://blog.csdn.net/ll328062201/article/details/40022997

版权

JS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

今天参加了某度的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对象的加载……具体看这篇文章：点击打开链接