三七互娱Web前台面试题【校招】

  • 时间:2020-04-24 19:15 作者:梁文璇 来源: 阅读:34
  • 扫一扫,手机访问
摘要:Ⅰ、正则表达式考察题①格式为: 2016 12 12类型的日期格式校验正则表达式;②字符串解析:将格式诸如“[img:(src...)]”的字符串解析替换为“ a href="src..." img src='src...' /a ”;Ⅱ、给input增加如下样式(CSS3)①背景为图片bg.j

Ⅰ、正则表达式考察题

①格式为: 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实现登录模块逻辑,包括客户名输入,密码输入,提交登录

  • 全部评论(0)
手机二维码手机访问领取大礼包
返回顶部