高级前端测试题
HTML／CSS测试
1.
你做的页面在哪些浏览器测试过？特有的css属性前缀分别是什么?
2. 网页制作会用到的图片格式有哪些？ 3. 请用CSS写一个简单的幻灯片效果页面，图片尺寸600*320(px)。 4. CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么? 5. 简述一下渐进增强和优雅降级之间的不同。
Javascript测试
尽量不使用第三方插件/库 1. 写出以下控制台输出结果。
a. console.log( 1 + 2 + '3' ); 输出：__________________ b. console.log( '3' + 2 + 1 ); 输出：__________________ c. console.log( + '3' + 2 + 1 ); 输出：__________________ d. console.log( 1 + +'2' + '3' ); 输出：__________________ e. console.log( 'A' - 'B' + 'C' ); 输出：__________________ f. console.log( 0 && 2 || 1 ); 输出：__________________ g. var a=0.1, b = a+++a, c = a--+b; console.log(a,b,c); 输出：__________________ 2. 写出以下代码在控制台的输出结果。 (function(){ var a = b = 9; })(); console.log(a); 输出：__________________ console.log(b); 输出：__________________ 3. 编写函数sum，使其按如下调用皆能正常运行。 console.log(sum(2,3)); // 输出5 console.log(sum(2)(3)); // 输出5 4. 实现数组的倒排以及降序排列。
var numberArray = [3,6,2,4,1,5]; 倒排结果：[5,1,4,2,6,3] 降序结果：[6,5,4,3,2,1] 5. 编写提取Url参数的函数，按key-value形式将结果存储到json结构中返回。 url示例：.domain./project/item/list.html?a=1&b=2&c=&d=xxx&e 6. 下面代码返回什么？解释一下 console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10)); 7. 已知有字符串foo=\写一个function将其转化成驼峰表示法\。
8. 如下代码点击\会在控制台输出什么？ for (var i = 0; i < 5; i++) { var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i)); btn.addEventListener('click', function(){ console.log(i); }); document.body.appendChild(btn); } ＊追问：如果有问题，如何修改代码以实现预期效果。 附加测试
1. 2.
一天时针和分针重合多少次？ ___________________
一根不均匀的香，需要2小时燃尽。最少需要几根香才能测量出2小时15分钟？
___________________ 3. 8个一样大小的球，其中7个质量一样，1个质量稍重，有一杆天枰，最少称重几次
可以找出那个不一样重量的小球？ _________ 4. 有一辆火车以每小时15公里的速度离开直奔，同时另一辆火车每小时20公里的速
度从开往。如果有一只鸟，以30公里每小时的速度和两辆火车同时启动，从出发，碰到另一辆车后就向相反的方向返回去飞，就这样依次在两辆火车之间来回地飞，直到两辆火车相遇。请问，这只鸟共飞行了多长的距离？ ____________ 5. 门外三个开关分别对应室三盏灯，线路良好，在门外控制开关时候不能看到室灯的
情况，现在只允许进门一次，能否确定开关和灯的对应关系？
前端测试题答案（非标准/仅供参考）
HTML/CSS部分
1.
目前主流浏览器：
IE(Internet Explorer)核：Trident,-ms- FF(Firefox)核：Gecko,-moz- Chrome／Safari核：WebKit,-webkit- Opera核：Presto,-o- 2. 主要图片格式： BMP、GIF、JPEG(.jpg/.jpeg)、PNG(png-8/png-24)、SVG、TIFF、WebP（新）... 3. 主要样式代码： .animation { width: 600px; height: 320px; overflow: hidden; background-size: cover; background-position: center; -webkit-animation-name: \ -webkit-animation-duration:20s; -webkit-animation-iteration-count: infinite; } -webkit-keyframes \ 0% { background: url('1.jpg') no-repeat;} 25% { background: url('2.jpg') no-repeat;} 50% { background: url('3.jpg') no-repeat;} 75% { background: url('4.jpg') no-repeat;} 100% { background: url('5.jpg') no-repeat;} } 4. 5.
垂直：line-height 水平：letter-spacing 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最
基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
楂樼骇鍓嶇娴嬭瘯棰?闄勭瓟妗? - 鐧惧害鏂囧簱
