高级前端测试题(附答案)

高级前端测试题HTMLCSS测试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); / 输出5console.log(sum(2)(3); / 输出54. 实现数组的倒排以及降序排列。var numberArray = 3,6,2,4,1,5; 倒排结果：5,1,4,2,6,3降序结果：6,5,4,3,2,15. 编写提取Url参数的函数，按key-value形式将结果存储到json结构中返回。url示例：/project/item/list.html?a=1&b=2&c=&d=xxx&e6. 下面代码返回什么？解释一下console.log(function f(n)return (n 1) ? n * f(n-1) : n)(10);7. 已知有字符串foo=get-element-by-id,写一个function将其转化成驼峰表示法getElementById。8. 如下代码点击Button3会在控制台输出什么？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-ChromeSafari内核：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: loops; -webkit-animation-duration:20s; -webkit-animation-iteration-count: infinite;-webkit-keyframes loops 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. 垂直：line-height 水平：letter-spacing5. 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。Javascript部分1. 参考答案：a:33(string)b:321(string)c:6(number)d:33(string)e:NaNC(string)f:1(number)g: 0.10000000000000009 1.2000000000000002 2.30000000000000032. 参考答案a: undefined b:9（全局变量）3. 参考代码function sum() if(arguments.length = 2) return arguments0 + arguments1; else var first = arguments0; return function(second) return first + second; 4. 参考代码倒排方法：numberArray.reverse()排序方法：numberArray.sort(function(a,b) return ab)5. 参考代码function getUrlPara(url) var _tmp = url.split(?), para = _tmp1 ? _tmp1.split(&) : , len = para.length, result = ; for(var i=0;ilen;i+) var _res = parai.split(=); result_res0 = _res1; return result;6. 10!(10的阶乘) = 3628800。立即执行函数的递归调用。7. 参考代码function lowerCamelCase(funcName) var words = funcName.split(-), len = words.length; for(var i=1; ilen; i+) wordsi = wordsi.charAt(0).toUpperCase() + wordsi.slice(1);/substring, substr皆可 return words.join();8. 5。本题考点为闭包与作用域。点击事件触发时，程序已执行完成。点击事件要输出变量i，就会先查找变量i，本身并未定义变量i，而闭包能够调用外部作用域中的变量，此时外部作用域中的i通过for循环的自加，值已经变为5，所以每个按钮点击事件，都会调用外部作用域中的变量i，在控制台输出5。想要实现预期的结果，即：点击哪个按钮，输出按钮上显示的那个i值，可以构建一个闭包，以保存自身使用的变量i。参考代码：for (var i = 0; i 5; i+) (function(i) var btn = document.createElement(button); btn.appendChild(document.createTextNode(Button + i); btn.addEventListener(click, function() console.log(i); ); document.body.appendChild(btn); )(i);附加题部分1. 22次。一天24小时，时针会转表盘两圈，一圈会与分针重合11次（最后一次重合时是12点0点=第一次重合），所以11*2=22次2. 4根。先用3