三七互娱Web前台面试题【校招】
Ⅰ、正则表达式考察题
①格式为： 2016-12-12类型的日期格式校验正则表达式；
②字符串解析：
将格式诸如“[img:(src…)]”的字符串解析
替换为“<a href=”src…”><img src=’src…’></a>”;
Ⅱ、给input增加如下样式（CSS3）
①背景为图片bg.jpg，图片不重复显示，左对齐，背景颜色为蓝色；
②宽200px;高50px；
③边框为5像素绿色的虚线；
④边框圆角半径3像素；
⑤边框阴影效果，模糊距离3像素，垂直偏移2像素，水平偏移1像素；
⑥输入字符上下居中。
⑦清理两边浮动；
⑧水平垂直居中与视口。
box-shadow：color ?h-shadow??v-shadow blur spread? inset；
color：阴影颜色 ———— 可选
h-shadow ：水平偏移量 —-必选? ? ? ? ??
v-shadow：垂直偏移量—–必选
blur：模糊距离 ————-可选
spread：阴影尺寸———-?可选
inset：内阴影 ————–可选
啦啦啦~~
Ⅲ、请用HTML5标签写一个符合语义化的页面，页面中有导航栏、页眉、页脚、文字内容以及图片内容。
考察的是h5的语义化标签
<DOCTYPE HTML>
<html>
<head>
????<meta charset=”utf-8″>
????<title></title>
</head>
<body>
? ? <header>
? ? ? ? <p><img src=”bg1.jpg” alt=”头部图标”></p>
? ? ? ? <h1>头部</h1>
? ? </header>
? ?// 导航
? ? <nav>
? ? ? <ul>
? ? ? ? ? <li>Home</li>
? ? ? ? ? <li>About</li>
? ? ? ? ? <li>Contact</li>
? ? ? </ul>
? ? </nav>
? ? // 内容区域
? ? <section>
? ? ? ? <h2>Content is loading……</h2>
? ? ? ? <article>
? ? ? ? ? ? <p>Writing something……</p>
? ? ? ? </article>
? ? </section>
? ? <footer>
? ? ? ? <p><img src=”bg2.jpg” alt=”二维码”><p>
? ? </footer>
</body>
</html>
Ⅳ、前台如何对web进行性能上的优化？有什么检测工具？
Ⅴ、CSS选择器的优先级如何定义？如何做选择器优化？
Ⅵ、说说你所知道的提高前台开发效率的工具或者方法？
Ⅶ、形容zepto touch模块的移动事件？click与tap的区别？tap底层是对哪些事件的封装？
Ⅷ、使用ajax（可使用jQuery框架，若使用其余框架请注明）写一个跨域异步获取json数据方案；说说是否使用javascript进行跨域异步post数据。
var url = ” http://www.37.com”;
Ⅸ、考察常见的数组操作：对数组testArray进行以下操作：
①从前面删除一个数字；
②从前面添加一个数字5；
③给数组从小到大进行排序；
④反转数组；
⑤在数组61之后加入62、63、64
给定的数组为[3,4,61,8,1]
var arr = [3,4,61,8,1];
arr.shift();
//console.log(arr);? ? [4,61,8,1]
arr.unshift(5);
//console.log(arr);? ? [5,4,61,8,1]
function sortArr(a,b){
return a-b;
}
console.log(arr.sort(sortArr)); //? [1, 4, 5, 8, 61]
console.log(arr.reverse());? //? [61, 8, 5, 4, 1]
arr.splice(arr.indexOf(61)+ 1,0,62,63,64);
console.log(arr);? ? //? [61, 8, 5, 4, 1, 62, 63, 64]
Ⅹ、 已知数组如下，请用js完成以下要求，需写出详细实现步骤。
①从大到小排序testArray各项；
②在testArray数组首尾分别增加数字11，99；
③在testArray数组元素61后插入62，63，64；
④将testArray数组反转输出算法，第一位放在最后一位，依此类推；
⑤将testArray去重算法
var testArray = [8,5,61,3,4,10,9];
function arraySort(a,b){
????return b-a;
}
console.log(testArray.sort(arraySort));? // [61,10,9,8,5,4,3]
testArray.unshift(11);
testArray.push(99);
console.log(testArray);? ?//? [11,61,10,9,8,5,4,3,99]
testArray.splice(testArray.indexOf(61)+1,0,62,63,64);
console.log(testArray);
console.log(testArray.reverse());
//??去重算法
function uniqueArr(array){
????var newArr = [];
????for(var i = 0; i < array.length; i++){
????????if(newArr.indexOf(array[i]) == -1){
????????????newArr.push(array[i]);
????????}
????}
????return newArr;
}
var arr = [1,2,3,3,5,6,4,5,2,7];
console.log(uniqueArr(arr)); // [1,2,3,5,6,4,7]
Ⅺ、算法题：请用js实现冒泡排序算法。
function bubbleSort(array)}{}
function bubbleSort(array){
????var len = array.length;
????var temp;
????for(var i = 0; i < len-1; i++){
????????for(var j = 0; j < len-1-i; j++){
????????????if(array[j] > array[j+1]){
????????????????temp = array[j];
????????????????array[j] = array[j+1];
????????????????array[j+1] = temp;
????????????}
????????}
????}
????return array;
}
var arr = [4,10,3,9,8,2,5];
console.log(bubbleSort(arr));
Ⅻ、创立子类Child，使用原型和构造函数的方式继承父类People的方法，并调用say函数说出姓名和年龄
function People(name,age){
????this.name=name;
????this.age=age;
????this.say=function(){
????????alert(“我的名字是:”+this.name+”,我今年”+this.age+”岁了！”);
????};
}
function Child(name,age){
????this.name=name;
????this.age=age;
}
Child.prototype = new People();
var child = new Child(‘lily’,21);
child.say();
ⅰ、使用原生JS实现一个英雄类Hero, 可以按照以下方式调用（考察点： JavaScript流程控制）
①Hero(“37FEer”)输出：
? ? Hi!This is 37FEer!
②Hero(“37FEer”).kill(1).recover(30)输出：
? ? Hi!This is 37FEer!
? ? Kill 1 bug (注意：数量1个，所以bug是单数）；
? ? Recover 30 bloods;
③?Hero(“37FEer”).sleep(10).kill(2)输出：
? ? Hi!This is 37FEer!
? ? // 等待10秒..
? ? Kill 2 bugs (注意：数量2个，所以bugs是复数)；
function Hero(name){
????this.name = name;
????console.log(‘Hi! This is ‘ + this.name + ‘!’);
????this.kill = function(killNum){
????????this.killNum = killNum;
????????this.bugDesc = killNum === 1 ? ‘bug’ : ‘bugs’;
????????console.log(this.killNumDesc = ‘Kill ‘ + this.killNum + ‘ ‘ + this.bugDesc);
????????return this;
????};
????this.recover = function(recoverNum){
????????this.recoverNum = recoverNum;
????????console.log(this.recoverNumDesc = ‘Recover ‘ + this.recoverNum + ‘ bloods;’);
????????return this;
????};
????this.sleep = function(t){
????????var wait = t*1000;
????????var start = new Date().getTime();
????????var end? = start;
????????while(end < start + wait){
????????????end = new Date().getTime();
????????}
????????return this;
????}
????return this;
}
console.log(Hero(’37FEer’));
console.log(Hero(’37FEer’).kill(2).recover(30));
console.log(Hero(’37FEer’).sleep(1).kill(2));
简答题
1，怎样做手机端web的真机调试和性能分析
2，用js实现登录模块逻辑，包括客户名输入，密码输入，提交登录
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 三七互娱Web前台面试题【校招】
