18年面试题总结

HTML&CSS问题

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

html

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

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

html

<!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的值取决于谁，分别为多少？

html

<!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效果

html

三：使用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>

效果图如下 alt text

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

html

<!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)结果是什么？

text

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

alt text 下列比较的判断结果是什么？产生这样结果的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);
}

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

javascript

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问题)，求得数值并不准确，你的解决办法是什么？

javascript

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)，就可以了。** 基于我们明确地知道分子是一个整数。**

在这里感谢这位博主 alt text

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

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.onclick=fn的区别？　　element.click()是模拟浏览执行点击操作，时间对象event能够传过去，而element.onclick=fn是被动触发的事件。
ES6数组的去重方法，ES5又是怎样进行数组去重？

javaScript

   //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对象兼容性怎么样？

javascript

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);

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);
}

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

javascript

一：用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)值不一样。

css

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

*IE8及以下不支持H5标签

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

IE8不支持媒体查询

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

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

css

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

IE9下给div设置filter之后border-radius失效？传送门

移动端兼容性问题

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

text

原因：
     因为在移动端中你点击屏幕时，移动端浏览器会有一个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手机
  });
};

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

text

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

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

text

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

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

text

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

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

其他杂项

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

text

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()函数的区别？在实际项目中遇到过哪些坑？

text

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

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

text

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

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

html

<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手写一个表单验证插件？

html

<!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}$/gi,
        );
        flagOut =
          flagOut &&
          validForm(
            "email",
            "emailSpan",
            "\t邮箱名不能为空！",
            "\t邮箱格式不正确！",
            /^\w+@[a-z1-9]{2,5}(\.[a-z]{2,3}){1,2}$/gi,
          );
        flagOut =
          flagOut &&
          validForm(
            "contact",
            "contactSpan",
            "\t联系方式不能为空！",
            "\t电话格式不正确！",
            /(^0\d{3}-\d{7}$)|(^0\d{2}-\d{8}$)|(^1[134578]\d{9}$)/gi,
          );
        return flagOut;
      }
    </script>
  </body>
</html>

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

html

<!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一张图片如何实现从左上角运动右下角？

HTML

跨域的实现方式有哪些？

text

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

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

text

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

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

有无做过iponeX的适配？

text

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

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

text

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

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

text

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与解析

有自己通过配置webpack搭建过Vue项目么？优化详解传送门未完待续。。。

18年面试题总结 ​

​

​

​

​

​

​

HTML&CSS问题 ​

JavaScript问题 ​

框架问题 ​

PC浏览器兼容问题? ​

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

移动端兼容性问题 ​

其他杂项 ​

18年面试题总结

HTML&CSS问题

JavaScript问题

框架问题

PC浏览器兼容问题?

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

移动端兼容性问题

其他杂项