bat，大企业面试 题目
1、列举3个HTML5标签，3个CSS3新特性，3个ECMAScript 5新API。
-
3个HTML5标签
-
-
3个CSS3新特性
-
border-radius -
@keyframes -
media query
-
-
3个ECMAScript 5新API
-
String.prototype.trim() -
Array.prototype.foEach() -
Array.prototype.isArray()
-
2、2种方式，实现某DIV元素以50px每秒的速度左移100px。
方法一 使用 jQuery
$('div').animate({'left': 100}, 2000);方法二 js + css3
// css
div {
transition: all 2s linear; // linear 规定以相同速度开始至结束的过渡效果
}
// js
div.style.left = (div.offsetLeft + 100) + 'px';3、用css分别实现某个DIV元素上下居中和左右居中。
div {
postion: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: red;
}4、用DIV+CSS实现三栏布局（左右固定200px，中间自适应）。
HTML
<div class="container">
<div class="main">
<h2>这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊h2>
div>
<div class="left">
左边
div>
<div class="right">
右边
div>
div>CSS
.container > div {
height: 200px;
}
.container {
padding: 0 200px;
}
.main,
.left,
.right {
position: relative;
float: left;
}
.left,
.right {
width: 200px;
}
.main {
width: 100%;
background-color: yellow;
}
.left {
background-color: blue;
margin-left: -100%;
left: -200px;
}
.right {
background-color: green;
margin-left: -200px;
left: 200px;
}5、按顺序写出alert弹出窗口的内容。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
alert('1.' + this.name);
return function(){
return this.name;
};
}
};
var func = object.getNameFunc();
alert('2.' + func());
alert('3.' + func.call(object));
alert('4.' + func.apply(object));结果：
-
var func = object.getNameFunc() => 1.My Object -
alert('2.' + func()) => 2.The Window -
alert('3.' + func.call(object)) => 3.My Object -
alert('4.' + func.apply(object)) => 4.My Object
6、列出三个常见的不同浏览器JS的兼容性问题。
-
Dom Leval 2事件绑定兼容性问题：ie8以下的浏览器不支持addEventListener来绑定事件，通过attachevent可以解决。 -
stopPropagation兼容性问题：ie8以下的浏览器不支持e.stopPropagation()来阻止事件传播，通过e.returnValue = false可以解决。 -
关于鼠标滚轮事件兼容性问题：
来自：JS滚轮事件(mousewheel/DOMMouseScroll)了解
7、用JS写一个实现继承的方法。
临时构造器继承
var inherit = (function() {
var F = function () {};
return function (C, P) {
F.prototype = P.prototype;
C.prototype = new F();
C.uber = P.prototype;
C.prototype.constructor = C;
}
});8、用JS实现一个数组合并的方法（要求去重）。
var arr1 = ['a'];
var arr2 = ['b', 'c'];
var arr3 = ['c', ['d'], 'e', undefined, null];
var concat = (function(){
// concat arr1 and arr2 without duplication.
var concat_ = function(arr1, arr2) {
for (var i=arr2.length-1;i>=0;i--) {
arr1.indexOf(arr2[i]) === -1 ? arr1.push(arr2[i]) : 0;
}
};
// concat arbitrary arrays.
// Instead of alter supplied arrays, return a new one.
return function(arr) {
var result = arr.slice();
for (var i=arguments.length-1;i>=1;i--) {
concat_(result, arguments[i]);
}
return result;
};
}()); 执行：concat(arr1, arr2, arr3)
返回：[ 'a', null, undefined, 'e', [ 'd' ], 'c', 'b' ]
来源：javascript如何合并多个数组
9、使用正则表达式给所有string对象添加trim方法。
String.prototype.trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
};10、用js实现一个电话号码提取的方法。
例如：” 1852145998 020-888-999845 测试 021 – 85421987, 19865754″
得到的结果应该是[1852145998, 020-888-999845 , 021 – 85421987, 19865754]
var str=" 1852145998 020-888-999845 测试 021 - 85421987, 19865754";
var reg=/(1\d+)|(0[0-9\s\-]+)/g;
alert(str.match(reg));来自：电话号码提取
11、哪些方法可以提升网站前端性能？
-
合并雪碧图，减少
http请求。 -
压缩
html、css、js文件。 -
使用
cdn加载。 -
使用
localstorage缓存和mainfest应用缓存。 -
css选择器的优化。