某知名企业招聘HTML5，陶国荣带你进入闯关模式

　　

“招兵买马”多多益善“双11”进入倒计时，近日，一组某知名企业招聘HTML5的面试题在网上流传，今天陶老师就带你进入闯关模式。

【第一关】列举3个HTML5标签，3个CSS3新特性。

陶老师闯关秘籍：

3个HTML5标签

<key>

<main>

<canvas>

3个CSS3新特性

border-radius

@keyframes

media query

【第二关】2种方式，实现某DIV元素以50px每秒的速度左移100px。

陶老师闯关秘籍：

方法一

使用 jQuery

$('div').animate({'left': 100}, 2000);

方法二

// css

div {transition: all 2s linear; }

【第三关】用css分别实现某个DIV元素上下居中和左右居中。

陶老师闯关秘籍：

div {

postion: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100px;

height: 100px;

margin: auto;

}

【第四关】列出三个常见的不同浏览器JS的兼容性问题。

陶老师闯关秘籍：

Dom 事件绑定兼容性问题：

ie8以下的浏览器不支持addEventListener来绑定事件，通过attachevent可以解决。

stopPropagation兼容性问题：

ie8以下的浏览器不支持e.stopPropagation()来阻止事件传播，通过e.returnValue = false解决。

【第五关】用JS写一个实现继承的方法。

陶老师闯关秘籍：

var temp = (function() {

var F = function () {};

return function (C, P) {

F.prototype = P.prototype;

C.prototype = new F();

C.uber = P.prototype;

C.prototype.constructor = C;

}

});

【第六关】用JS实现一个数组合并的方法（要求去重）。

陶老师闯关秘籍：

var arr1 = ['a'];

var arr2 = ['b', 'c'];

var arr3 = ['c', 'd', 'e', undefined, null];

var concat = (function(){

var concat_ = function(arr1, arr2) {

for (var i=arr2.length-1;i>=0;i--) {

arr1.indexOf(arr2[i]) === -1 ? arr1.push(arr2[i]) : 0;

}

};

return function(arr) {

var result = arr.slice();

for (var i=arguments.length-1;i>=1;i--) {

concat_(result, arguments[i]);

}

return result;

};

}());

【第七关】使用正则表达式给所有string对象添加trim方法。

陶老师闯关秘籍：

String.prototype.trim = function () {

return this.replace(/(^\s*)|(\s*$)/g, "");

};