Ⅰ, 正则表达式考察题
1格式为: 2016-12-12 类型的日期格式校验正则表达式;
2字符串解析:
将格式诸如 "[img:(src...)]" 的字符串解析
替换为 "<a href="src..."><img src='src...'></a>";
Ⅱ, 给 input 添加如下样式 (CSS3)
1背景为图片 bg.jpg, 图片不重复显示, 左对齐, 背景颜色为蓝色;
2宽 200px; 高 50px;
3边框为 5 像素绿色的虚线;
4边框圆角半径 3 像素;
5边框阴影效果, 模糊距离 3 像素, 垂直偏移 2 像素, 水平偏移 1 像素;
6输入字符上下居中.
7清除两边浮动;
8水平垂直居中与视口.
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 进行以下操作:
1从前面删除一个数字;
2从前面增加一个数字 5;
3给数组从小到大进行排序;
4反转数组;
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 完成以下要求, 需写出详细实现步骤.
1从大到小排序 testArray 各项;
2在 testArray 数组首尾分别添加数字 11,99;
3在 testArray 数组元素 61 后插入 62,63,64;
4将 testArray 数组反转输出算法, 第一位放在最后一位, 依此类推;
5将 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 流程控制)
1Hero("37FEer") 输出:
Hi!This is 37FEer!
2Hero("37FEer").kill(1).recover(30) 输出:
- Hi!This is 37FEer!
- Kill 1 bug (注意: 数量 1 个, 所以 bug 是单数);
- Recover 30 bloods;
3 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 实现登录模块逻辑, 包括用户名输入, 密码输入, 提交登录
来源: http://www.jianshu.com/p/f0b78a69040a