18年面试题总结

最新推荐文章于 2024-11-09 19:20:14 发布

乐橙Web

最新推荐文章于 2024-11-09 19:20:14 发布

阅读量455

点赞数

分类专栏：面试文章标签：面试题 html js

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/79572232

版权

面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML&CSS问题

JavaScript问题

框架问题

兼容问题

其他杂项

手写插件类

HTML&CSS问题

什么是flex弹性布局，应用的场景有哪些？其中侧轴和横轴居中的方式是什么？
　　①：即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。Ps:我回答的是，即动态的可响应的流式布局。
　　②：多用于手机移动端，兼容性较好，IE10及以上版本才支持。
　　③：侧轴居中方式align-items:center（用在父元素，适用于单行）align-content:center(用在父元素，必须是多行才行)
如何适用CSS写出超出范围出现省略号的样式，除了text-overflow:ellipsis（这个属性值的生效必须配合overflow属性中的非hidden值）这个属性？

style{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      width:100px;
}
<div>面试总结总结总结总结总结</div>
//适用于移动端，因为移动端的浏览器绝大多数内核都是webkit的

如何利用CSS画出一个60°的扇形？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .outer {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: orange;
        position: relative;
    }

    .innerOne,
    .innerTwo {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        position: absolute;
        clip: rect(0 100px 200px 0);
    }

    .innerOne {
        transform: rotate(-30deg);
        background: white;
    }

    .innerTwo {
        transform: rotate(-150deg);
        background: white;
    }
</style>

<body>
    <div class="outer">
        <div class="innerOne"></div>
        <div class="innerTwo"></div>
    </div>
</body>

</html>

如下代码中，margin-top和padding-top的值取决于谁，分别为多少？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .divOne {
    height: 400px;
    width: 800px;
    background: red;
    overflow: auto;
  }

  .div {
    padding-left: 50%;
    margin-top: 50%;
  }
</style>

<body>
  <div class="divOne">
    <div class="div">
      <a href="">鼠标触发
      </a>
    </div>
  </div>

</body>
<script>

</script>

</html>
/*其中.div元素中的height和width是相对于父级的高度和宽度，而margin-top和padding-left这些都是相对于父级的宽度而言的*/

简述BFC模型，什么情况下会触发BFC?在如下情景下中，如何解决这个问题？
``text
BFC（块级格式化上下文），它是指一块独立的渲染区域，该区域有一套渲染规则来块级盒子的布局，且与区域外部无关。即里面随便翻江倒海，都不会影响外部。
BFC的生成

float的值不为none,
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值absolute或fixed
display:table也可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC

一：BFC的相关问题有margin值塌陷（两个相邻的div元素，上面的margin-bottom和下面元素的margin-top值会采用一个较大的值作为值，解决办法就是使一个元素产生BFC效果，即可解决该问题）

```html
//以下情况会产生margin值穿透情况，请问解决的办法有哪些？
style{
    div {
        height: 400px;
        width: 400px;
        padding: 50px;
        background: blue;
    }

    section {
        margin-top:100px;
        top:0px;
        height:100px;
        width:100px;
        background:lightblue;
    }
 }
    <div>
        <section>

        </section>
    </div>
   //解决办法有：1.用padding替代margin 2.使父级元素产生BFC效果

三：使用BFC实现多兰布局，中间的元素且为自适应
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .left {
        background: red;
        float: left;
        height: 200px;
        width: 180px;
    }

    .center {
        background: yellow;
        overflow: hidden;
        height: 200px;
    }

    .right {
        background: blue;
        float:right;
        height: 200px;
        width: 180px;
    }
</style>

<body>
        <div class="left"></div>
        <div class="right"></div>
        //center必须写最后
        <div class="center"></div>
        
</body>

</html>

效果图如下
这里写图片描述

以下div布局会是什么样子的？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .div{
    height:100px;
    background: red;
  }
  .divTwo{
    width:100px;
    height:100px;
    float: right;
    background:blue;
  }
</style>
<body>
  <div class="div"></div>
  <div class="divTwo"></div>
</body>
</html>
//答案：红色和蓝色会不在一行，且蓝色靠右紧靠
//原因：因为div为块级元素，所以独占一行，而当类名为divTwo的div在第一行的时候，就会出现红色块和蓝色块在同一行，
//理由---float元素为半脱离文档元素，所以将浮动元素写在前面，其余的元素非float的元素就会哪点有位置就会往哪里跑。

JavaScript问题

判断以下语句变量a会输出什么？

 if (!"a" in window) {
        var a = 20;
    }
    alert(a);//undefined
  //原因如下：首先是ES5的var 声明，所以存在一个变量提升。第二：因为环境是全局环境，所以相当于变量a已经在全局环境下注册了，作为window的一个属性存在，只不过是undefined,undefined也是有值的，所以"a" in window结果为true,所以结果为undefined。

在JS中undefined和null有什么不同？alert(null == undefined)结果是什么？

undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined.
null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象，指向一个空对象的引用，父类型是object。
alert(null == undefined)//true
原因：ES认为undefined是从null派生出来的，所以把它们定义为相等的。

等于操作符一些特殊情况的比较
下列比较的判断结果是什么？产生这样结果的i原因又是什么？

0==null  
/*false*/
0<=null 
/*true*/
0>=null  
/*true*/
0<null   
/*false*/
0>null   
/*false*/
/*因为在等于操作符中null和undefined是不会进行转型的，所以0在比较null时会成false，而在其他比较操作符中null则会转成数值再去比较，所以会出现这样的结果*/

在JS中如何实现像jQuery.js进行选择元素？

function getClass(eleClass){
    return document.getElementsByClassName(eleClass);
}
function getId(eleId){
    return document.getElementById(eleId);
}

请判断下列语句输出结果是什么?


  var a = {
       c: 1
   };
   var b = a;
   console.log(b.c); //2
   var a = {
       c: 3
   };
   console.log(b.c); //2
   a.c = 4;
   console.log(b.c); //2
//原因：因为是引用类型变量，在var b = a 时，进行了浅拷贝，所以b.c等于2，
//后来又重写了变量a的，使其指针指向了一个内存地址，所以摆脱了原来的引用,
//所以b.c一直为2。  <

具体可百度深浅拷贝

如何实现深拷贝和浅拷贝？

//浅拷贝
    function shallowCopy(ob,newOb) {
        var newOb = newOb||{};
        for (var key in ob) {
            newOb[key] = ob[key];
        }
        return newOb;
    }
    var newObj = shallowCopy(obj);
    newObj.b.c = 2;
    console.log(obj)//{a:1,b:{c:2}}
    console.log(newObj)//{a:1,b:{c:2}}
 //深拷贝
     function deepCopy(ob,newOb) {
        var newOb = newOb||{};
        for (var key in ob) {
            if (ob[key] instanceof Object) {
                ob[key].constructor == Array ? newOb[Key] = [] : newOb[key] = {};
                deepCopy(ob[key],newOb[key]);
            } else {
                newOb[key] = ob[key];
            }
        }
        return newOb;
    }
    var obj = {
        a: 1,
        b: {
            c: 1
        }
    }
    var newObj = deepCopy(obj);
    newObj.b.c = 2;
    console.log(obj)//{a:1,b:{c:1}}
    console.log(newObj)//{a:1,b:{c:2}

下面情况在使用严格模式和非严格模式下，变量a和b分别会输出什么?

function(){
   // "use strict"
   var a =b = 1;
}
console.log(b);
// 非严格模式
b = 1
// 严格模式
"Uncaught ReferenceError: b is not defined"

由于IEEE754浮点计算标准问题(并非ECMAScript问题)，求得数值并不准确，你的解决办法是什么？

 class calculate {
        add(oneNum, twoNum) {
            let N1 = 0,
                N2 = 0,
                len = 0,
                realValue;
            try {
                N1 = oneNum.toString().split('.')[1].length;
            } catch (e) {
                N1 = 0;
            }
            try {
                N2 = twoNum.toString().split('.')[1].length;
            } catch (e) {
                N2 = 0;
            }
            len = Math.pow(10, Math.max(N1, N2));
            return realValue = (oneNum * len + twoNum * len) / len;
        }
        sub(oneNum, twoNum) {
            let N1 = 0,
                N2 = 0,
                len = 0,
                pm;
            try {
                N1 = oneNum.toString().split('.')[1].length;
            } catch (e) {
                N1 = 0;
            }
            try {
                N2 = two.toString().split('.')[1].length;
            } catch (e) {
                N2 = 0;
            }
            len = Math.pow(10, Math.max(N1, N2));
            pm = (Number(oneNum * len) - Number(twoNum * len)) / len;
            return pm;
        }
        mul(oneNum, twoNum) {
            let N1 = 0,
                N2 = 0,
                len = 0,
                pm = 0;
            try {
                N1 = oneNum.toString().split('.')[1].length;
            } catch (e) {
                N1 = 0;
            }
            try {
                N2 = two.toString().split('.')[1].length;
            } catch (e) {
                N2 = 0;
            }
            len = Math.pow(10, Math.max(N1, N2));
            pm = (Number(oneNum * len) * Number(twoNum * len)) / Math.pow(len, 2)
            return pm;
        }
        div(oneNum, twoNum) {
            let N1 = 0,
                N2 = 0,
                len = 0,
                pm = 0;
            try {
                N1 = oneNum.toString().split('.')[1].length;
            } catch (e) {
                N1 = 0;
            }
            try {
                N2 = two.toString().split('.')[1].length;
            } catch (e) {
                N2 = 0;
            }
            len = Math.pow(10, Math.max(N1, N2));
            pm = Number(oneNum * len) / Number(twoNum * len)
        }
    }
    //2018-05-28发现这样写法并不是完美的，在某些特殊数值的情况下，如("268.34","0.83")仍会出现IEEE754的问题，解决办法就是在 Number(oneNum * len) 后面加上tofixed(0)，就可以了。** 基于我们明确地知道分子是一个整数。**

在这里感谢这位博主
转成整数

javaScript（“隐式”）声明问题？

      let str  = 98789083204328092423;
      console.log(str);
      //出现输出错误，刚开始还以为是字符串（-_-||）摸不住问题出现到哪里
      //在JS中当数值大于 5e-324小于1.7976931348623157e+308表明为正常数值范围内，否则就会出现数字错误。

Array.prototype.concat.apply([],[[1,2,3],[4,5,6]])答案是多少？这个Array指的是什么？apply里为什么又要设置[]这个参数？
　　答案是[1,2,3,4,5,6]
　　具体答案看，传送门
element.click()和element.οnclick=fn的区别？
　　element.click()是模拟浏览执行点击操作，时间对象event能够传过去，而element.οnclick=fn是被动触发的事件。
ES6数组的去重方法，ES5又是怎样进行数组去重？

   //ES6
   Array.prototype.unique = function(){
         return Array.from(new Set(this))
   }
   //ES5
   Array.prototype.unique = function(){
         var arr = this,i = 0,oArr = {},len = arr.length,newArr=[];
         for(;i<len;i++){
          if(!oArr[arr[i]]){
            obj[arr[i]] = 1
            newArr.push(arr[i])
          }
         }
         return newArr;
   }

如何使用原生formDate进行上传文件，formDate对象兼容性怎么样？

    function upFile(event) {
        var data = new FormData(),
            targetFile = event.target.files[0],
            XHR = new XMLHttpRequest();
        XHR.open("post", url, true);
        data.append("file", targetFile),
            XHR.onreadystatechange = function () {
                if (XHR.readyState == 4) {
                    if (XHR.status == 304 || XHR.status == 200) {
                        console.log(XHR.responseText);
                    }
                }
            }
        data.send(data);
    }
    document.getElementById("upFile").addEventListener("change", upFile, false);

只回答了:不兼容IE10【如果有哪些大神知道坑的请留言 Thanks♪(･ω･)ﾉ】

DOM事件流的过程？什么是事件委托？
　　DOM事件流过程：事件捕获阶段→目标阶段→冒泡阶段。
　　事件委托：即通过对元素事件对象属性进行判断，然后执行相关的函数。
如何把jQuery对象转换成元素对象？

$(selector).eq(0)和$("")[0];
//PS源码实现
function jQuery(vArg){
   var obj = [];
   this.elements.push = document.getElmentsByTagName(vArg.slice(1));
}
jQuery.prototype = {
   get: function(n){
    return this.elements[0];
   }
}
function $(vArg){
   return new jQuery(vArg);
}

如何验证一个对象是否为空？

一：用for-in
二：JSON.stringify(obj=='{}')
三：Object.keys(obj).length;

请问var a={}, b={key:‘b’}, c={key:‘c’}; a[b]=123; a[c]=456; console.log(a[b]) 打印出来结果是什么？

var a={},
b={key:'b'},
c={key:'c'};

a[b]=123;
a[c]=456;

console.log(a[b]);//为什么是456？
因为键名称只能是字符串，b/c单做键会调用toString得到的都是[object Object]，a[b],a[c]都等价于a["[object Object]"]，那不就是更新[object Object]这个键的值了

框架问题

BootStrap有哪几个大的版本？各个版本的特点是什么？栅格化布局是什么？栅格化布局的优缺点是什么？
　　4个大的版本，具体版本差别传送门；
　　栅格化布局：栅格化设计就是把网页的宽度分成固定的相同宽度，然后列出各种组合的可能，以方便在进行页面呈现的时候能够快速的进行布局，通常分成12等分或者24等分。
　　栅格化布局的优点：1.能大大提高网页的规范性，提高开发速度和减少维护成本。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。2.基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。3.减少布局不兼容
　　缺点：自定义功能变弱（不知道对不对)

PC浏览器兼容问题?

pc上你都踩过哪些兼容性的坑？

各个浏览器的（padding）内填白和外填白(margin)值不一样。

//解决办法
margin:0;
padding:0;

*IE8及以下不支持H5标签

//解决办法
//一：引入html5shim.js库文件
//二：借助document.createElement()进行创建元素

IE8不支持媒体查询

//解决办法
//引入response.js

IE8不支持rgba颜色表示方法
传送门
IE9图片有蓝色或者黑色的边框

 //解决办法
 //img{border:none}

IE9下给div设置filter之后border-radius失效？
传送门
ε=(´ο｀*)))唉都是IE的问题【我就回答了几个，有时间得专门开个文章记录】

移动端兼容性问题

click点击事件为什么在移动端会产生300ms的延迟？解决的方法是什么？

原因：
     因为在移动端中你点击屏幕时，移动端浏览器会有一个300ms的时间延迟，来判断
     你是否在这300ms进行第二次点击，如果点在这段时间内点击的话，再根据meta标          
     签页面会进行放大。综上，所以会有这样一个300ms的延迟。
解决办法：
     一：使用npm包，FastClick
     二：使用移动端的touchStart时间来代替click

怎么解决浏览器输入法挡住输入框问题？

//解决办法
  var oIn = document.getElementsByTagName("input")[0];
  oIn.onfocus = function(){
      var _this = this;
      setTimeout(function(){
          _this.scrollIntoView();
          //这个函数的作用就是让获得焦点的元素与视窗口上部分齐平，默认参数为true
          _this.scrollIntoViewIfNeeded()//兼容360手机
      })
  }

移动端的点击穿透事件怎么解决？

原因：
     A、B两个层块叠加到一起，B在A上，当你点击B事件，移除B层的时候，你会发现
     A层上也出现click事件。
解决办法：
     一：全局使用touch事件。二：给函数语句设置延迟，如350ms在执行去除B层语句

iphone动态生成html元素click失效怎样解决？

解决办法：为绑定的click的元素增加CSS样式，cursor:pointer;

给touchstar事件加上preventDefault的后果是什么？

后果：你会发现连页面滚动都不滚动了

日后传送移动浏览器兼容总结贴

其他杂项

你知道浏览器每一次的并发请求数是多少么？
　　浏览器的并发请求数目限制是针对同一域名的。【即同一时间针对同一域名下的请求有一定数量限制】如果把所有资源都放在一个域名下面，其他请求就迟迟无法完成，浏览器看起来就是卡住了，而把其它资源放到其它域名里，css和图片就可以并发请求了。各个浏览器并发请求数如下：
请你详细叙述以下从输入URL到页面呈现到你眼前的过程？

1.DNS域名解析；
2.建立TCP链接（三次握手）；
3.发送HTTP请求；
4.服务器处理请求；
5.返回响应结果；
6.关闭TCP链接（四次握手）；
7.浏览器解析HTML;
8.浏览器布局渲染；

过程详情传送门一
 过程详情传送门二

服务器返回的错误码是什么意思？
　　面试官的：
　　 302 — 所请求的页面已经临时转移至新的url。
　　 304 — 服务器告诉客户，原来缓冲的文档还可以继续使用，服务器没有新的数据推送。
　　 403 — 所请求的页面被服务器禁止访问。
　　 404 — 服务器无法找到被请求的页面。
　　总结：
　　　　1xx:信息响应类，表示接收到请求并且继续处理
　　　　 2xx:处理成功响应类，表示动作被成功接收、理解和接受
　　　　3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
　　　　 4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
　　　　 5xx:服务端错误，服务器不能正确执行一个正确的请求
HTTP和HTTPS之间区别是什么？简述HTTPS的加密解密过程？
详情传送门
Auth2.0有了解过么？比如微信登录授权，可不可以解释一下？
传送门
Date()函数与new Date()函数的区别？在实际项目中遇到过哪些坑？

Date()函数不管里面传什么样的参数，都会返回一个当前的时间。而new Date()则会根据里面的参数值，转换成不同的时间，参数格式不对的情况下，会返回一个"Invalid Date",

你能讲一讲CSS in JS么？（-_-||）

   react的写法违背了"关注点分离"，将JS、CSS、HTML混合在一起来写，即JSX。出现
   CSS in JS的原因，简单来讲就是react对CSS封装有点薄弱，然后就出现了一些列的
   来书写cssd的第三方库，用JS的写法来书写CSS，增强封装的模块化的可用性。

坑One:苹果和安卓时间格式处理问题
 坑Two:时区问题，导致时间不一样
 传送：JS原生对象的一些冷知识
### 手写插件类
*请手写一个分页插件？前台分页的特点？

<html>

<head>
    <meta charset='utf-8'>
    <script type="text/javascript" src="page.js"></script>

    <style type="text/css">
        #idData {
            color: red;
            border: solid;
            text-align: center;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body onLoad="goPage(1,10);">
    <table id="idData" width="70%">
        <tr>
            <td>liujinzhong1</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong2</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong3</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong4</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong5</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong6</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong7</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong8</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong9</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong10</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong11</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong12</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong13</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong14</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong15</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong16</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong17</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong18</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong19</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong20</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong21</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong22</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong23</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong24</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong25</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong26</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong27</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong28</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong29</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong30</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong31</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong32</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong33</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong34</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong35</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong36</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong37</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong38</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong39</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
        <tr>
            <td>liujinzhong40</td>
            <td>25</td>
            <td>男</td>
            <td>山西吕梁</td>
        </tr>
    </table>
    <table width="60%" align="right">
        <tr>
            <td>
                <div id="barcon" name="barcon"></div>
            </td>
        </tr>
    </table>
</body>
<script>
    /**
     * 分页函数
     * pno--页数
     * psize--每页显示记录数
     * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
     * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
     **/
    function goPage(pno, psize) {
        var itable = document.getElementById("idData"),
            num = itable.rows.length,
            //表格所有行数(所有记录数)
            totalPage = 0,
            //总页数
            pageSize = psize;
        //每页显示行数
        if (num / pageSize > parseInt(num / pageSize)) {
            totalPage = parseInt(num / pageSize) + 1;
        } else {
            totalPage = parseInt(num / pageSize);
        }
        //总共分几页 
        var currentPage = pno; //当前页数
        var startRow = (currentPage - 1) * pageSize;
        //开始显示的行  
        var endRow = currentPage * pageSize;
        //结束显示的行  
        endRow = (endRow > num) ? num : endRow;
        //遍历显示数据实现分页
        for (var i = 0; i < num; i++) {
            var irow = itable.rows[i];
            if (i >= startRow && i < endRow) {
                irow.style.display = "block";
            } else {
                irow.style.display = "none";
            }
        }
        var pageEnd = document.getElementById("pageEnd");
        var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页跳到" +
            "<input type='number' class='whichPage'>页<p class='goPage'>Go</p>";
        if (currentPage > 1) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a>"
        } else {
            tempStr += "首页";
            tempStr += "<上一页";
        }

        if (currentPage < totalPage) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页></a>";
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
        } else {
            tempStr += "下一页>";
            tempStr += "尾页";
        }

        document.getElementById("barcon").innerHTML = tempStr;
        var whichPage = document.getElementsByClassName('whichPage')[0];
        var iNum = Number(whichPage.value);
        document.getElementsByClassName("goPage")[0].onclick = function () {
            if (iNum && iNum <= totalPage) {
                goPage(whichPage.value, psize);
            } else {
                alert("请填入正确的数字")
                whichPage.value = '';
            }
        }
    }
</script>

</html>

前台分页特点：载量大，显示慢，加载时用户体验不好。服务器压力请求少，换页时用户体验好。如果有即时性内容，就不能翻回来的时候更新了。适合请求数据较少的，静态页面。

用面向对象的方法写一个弹窗插件？

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
            margin: 100px;
        }

        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #DD8D7C;
            position: absolute;
            left: 50px;
            top: 50px;
            z-index: 2;
        }

        .box .title {
            height: 40px;
            line-height: 40px;
            background: #d8d8d8;
        }

        .box .title .close {
            position: absolute;
            top: 0;
            right: 10px;
            cursor: pointer;
        }

        .mark {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            background: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <input type="button" name="" id="" value="弹窗1" />
    <input type="button" name="" id="" value="弹窗2" />
    <input type="button" name="" id="" value="弹窗3" />
    <!--<div class="box">
            <div class="title">
                <span>弹窗</span>
                <span class="close">X</span>
                <div class="con">XXX</div>
            </div>
        </div>-->
    <!--<div class="mark"></div>-->
</body>
<script type="text/javascript">
    window.onload = function () {
        var aBtns = document.getElementsByTagName('input');
        aBtns[0].onclick = function () {
            var d1 = new Dialog();
            d1.init({
                w: 200,
                h: 200,
                title: '最新消息',
                con: '今天周五',

            })
        };
        aBtns[1].onclick = function () {
            var d2 = new Dialog();
            d2.init({
                w: 300,
                h: 300,
                title: 'qq',
                con: 'hi',
                dir: 'right',
            })
        }
        aBtns[2].onclick = function () {
            var d3 = new Dialog();
            d3.init({
                w: 400,
                h: 400,
                title: '微信',
                con: 'hello',
                mark: true
            })
        }

    }

    function Dialog() {
        this.oBox = null;
        this.oMark = null;
        this.setting = { //配置参数
            w: 300,
            h: 300,
            dir: 'center',
            title: '',
            mark: false
        }
    }
    Dialog.prototype.init = function (opt) {
        extend(this.setting, opt);
        this.creat();
        this.dir();
        this.close();
        if (this.setting.mark) {
            this.mark();
        }

    }
    //动态创建窗口
    Dialog.prototype.creat = function () {
        this.oBox = document.createElement('div');
        this.oBox.className = "box";
        this.oBox.innerHTML = '<div class="title"><span>' + this.setting.title +
            '</span><span class="close">X</span><div class="con">' + this.setting.con + '</div></div>'
        document.body.appendChild(this.oBox);
    }
    //加一层纱
    Dialog.prototype.mark = function () {
        this.oMark = document.createElement('div');
        this.oMark.className = "mark";
        document.body.appendChild(this.oMark);
    }
    //窗口大小和位置
    Dialog.prototype.dir = function () {
        this.oBox.style.width = this.setting.w + 'px';
        this.oBox.style.height = this.setting.h + 'px';
        if (this.setting.dir == 'center') {
            this.oBox.style.left = (vieww() - this.oBox.offsetWidth) / 2 + "px";
            this.oBox.style.top = (viewh() - this.oBox.offsetHeight) / 2 + "px";
        }
        if (this.setting.dir == 'right') {
            this.oBox.style.left = vieww() - this.oBox.offsetWidth + "px";
            this.oBox.style.top = viewh() - this.oBox.offsetHeight + "px";
        }
    }
    //关闭窗口
    Dialog.prototype.close = function () {
        var oClose = this.oBox.getElementsByClassName('close')[0];
        var _this = this;
        oClose.onclick = function () {
            document.body.removeChild(_this.oBox);
            if (_this.setting.mark) {
                document.body.removeChild(_this.oMark);
            }
        }
    }
    function vieww() {
        return document.documentElement.clientWidth;
    }
    function viewh() {
        return document.documentElement.clientHeight;
    }
</script>
</html>

请用原生JS手写一个表单验证插件？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="#">
        用户名：
        <input id="uname" name="uname" />
        <span id="unameSpan"></span>
        <br />
        <br /> 邮箱：
        <input id="email" name="email" />
        <span id="emailSpan"></span>
        <br />
        <br /> 联系方式：
        <input id="contact" name="contact" />
        <span id="contactSpan"></span>
        <br />
        <br />
        <input type="submit" value="提交" onclick="return validateForm();" />
    </form>
    <script>
        function validForm(EleName, EleSpanName, NullMsg, ErrMsg, RegexInfo) {
            var flag = true;
            var username = document.getElementById(EleName).value.trim();
            if (!username) {
                document.getElementById(EleSpanName).innerHTML = NullMsg;
                flag = false;
            } else {
                var unameRegex = RegexInfo;
                if (!unameRegex.test(username)) {
                    document.getElementById(EleSpanName).innerHTML = ErrMsg;
                    flag = false;
                }
            }
            return flag;
        }

        function validateForm() {
            var flagOut = validForm("uname", "unameSpan",
                "\t用户名不能为空！", "\t用户名 中文 长度 3-10！",
                /^[\u4E00-\u9FA5]{3,8}$/ig);
            flagOut = flagOut && validForm("email", "emailSpan",
                "\t邮箱名不能为空！", "\t邮箱格式不正确！",
                /^\w+@[a-z1-9]{2,5}(\.[a-z]{2,3}){1,2}$/ig);
            flagOut = flagOut && validForm("contact", "contactSpan",
                "\t联系方式不能为空！", "\t电话格式不正确！",
                /(^0\d{3}-\d{7}$)|(^0\d{2}-\d{8}$)|(^1[134578]\d{9}$)/ig);
            return flagOut;
        }
    </script>
</body>

</html>

请问如何实现类似秒针的CSS动画？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }

    div {
        position: absolute;
        top: 200px;
        left: 200px;
        width: 2px;
        height: 100px;
        background: Red;
        animation: animations 60s linear infinite;
        transform-origin: left bottom;
    }

    @keyframes animations {
        from {
            transform: rotateZ(0deg)
        }
        to {
            transform: rotateZ(360deg)
        }
    }
</style>

<body>
    <div></div>
</body>

</html>

利用CSS一张图片如何实现从左上角运动右下角？

跨域的实现方式有哪些？

1.jsonp【get异步回调，和后台协同共同制定】。
2.图像ping【单向通信】
3.CORS【不能发送和接受cookie】
4.comet【长轮询和短轮询，http流】
5.websokets【全双工，双向通信】

正向代理和反向代理之间的区别是什么？你做过哪些尝试？

正向代理：代理客户端，即客户端请求目标服务器，中间搭建一个服务器，作为中间件去获取目标服务器的数据，然后客户端再获取。
反向代理：代理服务器，对服务器是透明的，优化网络的负载。
1.正向代理---node搭建express服务器；ccproxy代理服务器
2.nginx服务器

正向代理和反向代理详解传送门

有无做过iponeX的适配？

答：无
如何做iphoneX的适配：[传送门](https://www.cnblogs.com/lolDragon/p/7795174.html)

你平时一般都是通过哪种方式实现下拉刷新和上拉加载？

通过mui、dropLoad.js、better-scroll、meScroll.js来实现

在项目上你都做过哪些提高性能上的尝试？

1.合理设置HTTP缓存。
2.资源合并与压缩
3.CSS Sprites
4.inline images【嵌入CSS中】
5.lazyLoad
6.脚本置底部
7.CSS放在head中
8.减少不必要的跳转
9.减少模块之间不必要的跳转
10.减少reflow和repaint
11.不要使用eval和function
12.使用join方法拼接字符串
13.CSS选择符优化
14.image优化
15.CDN优化
16.DNS与解析