2018年9月5日

北京36氪笔试

1.实现一个满屏的品字布局效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    /*注意这里不设置html的话，他的高度不能满屏*/
    html, body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    header, section{
      width: 100%;
      height: 50%;
      background-color: red;
      font-size: 50px;
    }
    .left {
      float: left;
      width: 50%;
      height: 100%;
      background-color: green;
    }
    .right {
      float: right;
      width: 50%;
      height: 100%;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <header>top</header>
  <section>
    <div class="left">left</div>
    <div class="right">right</div>
  </section>
</body>
</html>

效果图

2.实现一个函数，使它满足

console.log(sum(3,2)) 输出5；

console.log(sum(3)(2)) 输出5；

  <script type="text/javascript">
    function sum() {
      if (arguments.length > 1) {
        return arguments[0] + arguments[1];
      } else {
        var a = arguments[0];
        return function(x) {
          return a+x;
        }
      }
    }
    console.log(sum(3,2));    //5
    console.log(sum(3)(2));   //5
  </script>

3.写一个原型链继承的函数

<body>
  <div id="one"></div>
  <script type="text/javascript">
    function Elem(id) {
      this.elem = document.getElementById(id);
      return this;
    } 
    Elem.prototype.html = function(val) {
      var elem = this.elem;
      if (val) {
        elem.innerHTML = val;
        return this;
      } else {
        return elem.innerHTML;
      }
    }
    Elem.prototype.on = function(type,fn) {
      var elem = this.elem;
      elem.addEventListener(type,fn);
      return this;
    }
    var one = new Elem("one");
    one.html("<p>this is apple</p>").on("click",function(){console.log(this.innerHTML)});
    //<p>this is apple</p>
  </script>
</body>

2018年9月7日

盖娅娱乐

1.input新增了哪些类型，怎么使用。

<body>
  <div><input type="email">邮箱</div>
  <div><input type="url">网址</div>
  <div><input type="tel">电话</div>
  <div><input type="number">数字类型，只能输入数学字符</div>
  <div><input type="Date">选取年月日</div>
  <div><input type="Month">选取年月</div>
  <div><input type="Week">选取年和周</div>
  <div><input type="Time">选取时间，即小时和分钟</div>
  <div><input type="Datetime">选取年月日和时间（UTC时间，比本地时间多了一个东八区）</div>
  <div><input type="Datetime-local">选取年月日和时间（本地时间）</div>
</body>

2.http和https。

HTTPS和HTTP的区别主要如下：

　　1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

　　2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

　　3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

　　4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

3.cookie, sessionStorage和localStorage区别。

4.DOM怎么新增、删除、插入、替换节点。

新增节点 document.createElement()

<body>
  <div id="div1"></div>
  <p id="p2">this is p2</p>
  <script type="text/javascript">
    var div1 = document.getElementById("div1");
    var p = document.createElement("P"); //新增一个p节点
    p.innerHTML = "this is p1";
    div1.appendChild(p);        //将p标签插入到id为div1的div标签中

    var p2 = document.getElementById("p2");
    div1.appendChild(p2);    //将存在的p2元素移动到div标签里面，成为最后一个子元素
  </script>
</body>

删除节点父元素.removeChild(子元素)

<body>
  <div id="box">
    <div id="div1">
      <span>1</span>
      <span>2</span>
      <div>3</div>
      <div>4</div>
    </div>
  </div>
  <script type="text/javascript">
    var div1 = document.getElementById("div1");
    //获取父元素
    var parent = div1.parentElement;  //id为box的那个Div元素
    //获取子元素
    var child = div1.childNodes;   //一个集合，空白处也包括
    //移除元素
    div1.removeChild(child[1]);   //由于包括空白处，所以此处删除的是<span>1</span>
  </script>
</body>

插入节点父元素.insertBefore(要插入的元素，插入到哪个元素之前) 父元素.appendChild(要插入的子元素)

<body>
  <div id="one">
    <div id="div1">1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <script type="text/javascript">
    var one = document.getElementById("one");
    var div1 = document.getElementById("div1");
    var p = document.createElement("p");
    var text = document.createTextNode("this is p1");
    p.appendChild(text);
    one.insertBefore(p,div1);   //将p元素插入到div1元素之前
  </script>

替换节点

<body>
  <div id="div1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
  <script type="text/javascript">
    var div1 = document.getElementById("div1");
    var p = document.createElement("p");
    p.innerHTML = "this is p";
    div1.replaceChild(p,div1.childNodes[1]);  //p去替换<p>1</p>
  </script>
</body>

5.css3实现一个从底部接近的效果。

  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      bottom: 200px;
      animation: one 2s linear;
    }
    @keyframes one {
      0% {
        bottom: 0px;
      }
      25% {
        bottom: 50px;
      } 
      50% {
        bottom: 100px;
      }
      75% {
        bottom: 150px;
      }
      100% {
        bottom: 200px;
      }
    }
  </style>
</head>
<body>
  <div>1</div>
</body>

6.实现一个数组去重的函数。

<body>
  <script type="text/javascript">
    function only(arr) {
      var a = [];
      for(var i=0; i<arr.length; i++) {
        if (a.indexOf(arr[i]) == -1) {
          a.push(arr[i]);
        }
      }
      return a;
    }
    var a = [1,1,2,3,2];
    console.log(only(a));
  </script>
</body>

7.实现一个定时器，有暂停，重置，等功能。

  <style type="text/css">
    .box {
      width: 300px;
      height: 200px;
      text-align: center;
      margin: 200px auto;
    }
    #one {
      background-color: rgba(7,17,27,0.2);
      width: 280px;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      text-align: center;
      margin-left: 10px;
      margin-bottom: 20px;
      color: green;
    }
  </style>
</head>
<body>
  <div class="box">
    <div id="one">显示时间</div>
    <div>
      <button id="start" onclick="start()">开始</button>
      <button id="stop" onclick="stop()">暂停</button>
      <button id="resert" onclick="resert()">重置</button>
    </div>
  </div>
  <script type="text/javascript">
    var timer = null,h=m=s=ms=0,str=null;
    var show = document.getElementById("one");
    function time(){
      ms += 50;
      if (ms >= 1000) {
        ms = 0;
        s += 1;
      }
      if (s >= 60) {
        s = 0;
        m += 1;
      }
      if (m >= 60) {
        m = 0;
        h += 1;
      }
      str = one(h)+"小时"+one(m)+"分钟"+one(s)+"秒"+ms+"毫秒";
      show.innerText = str;
    }
    function start(){
      timer = setInterval(time,50);
    }
    function stop(){
      clearInterval(timer);
    }
    function resert(){
      clearInterval(timer);
      h=m=s=ms=0;
      var str = "00小时00分钟00秒0000毫秒";
      show.innerText = str;
    }
    function one(n){
      if (n<10) {
        return "0"+n;
      } else {
        return ""+n;
      }
    }
  </script>
</body>

8.vue的双向数据绑定。

https://www.cnblogs.com/libin-1/p/6893712.html

9.attr()和prop()。

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

上面的描述也许有点模糊，举几个例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

再举一个例子：

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

全文完。

10.实现一个方法，对字符串去除空格，最后输出没有空格的字符串。

使用js去除字符串内所带有空格，有以下三种方法：

( 1 ) replace正则匹配方法

　　去除字符串内所有的空格：str = str.replace(/\s*/g,"");

　　去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,"");

　　去除字符串内左侧的空格：str = str.replace(/^\s*/,"");

　　去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,"");

　　示例：

var str = " 6 6 ";
var str_1 = str.replace(/\s*/g,"");
console.log(str_1); //66

var str = " 6 6 ";
var str_1 = str.replace(/^\s*|\s*$/g,"");
console.log(str_1); //6 6//输出左右侧均无空格

var str = " 6 6 ";
var str_1 = str.replace(/^\s*/,"");
console.log(str_1); //6 6 //输出右侧有空格左侧无空格

var str = " 6 6 ";
var str_1 = str.replace(/(\s*$)/g,"");
console.log(str_1); // 6 6//输出左侧有空格右侧无空格

( 2 ) str.trim()方法

　　trim()方法是用来删除字符串两端的空白字符并返回，trim方法并不影响原来的字符串本身，它返回的是一个新的字符串。

　　缺陷：只能去除字符串两端的空格，不能去除中间的空格

　　示例：

var str = " 6 6 ";
var str_1 = str.trim();
console.log(str_1); //6 6//输出左右侧均无空格

　　单独去除左侧空格则使用 str.trimLeft(); //var str_1 = str.trimLeft();

　　单独去除右侧空格则使用 str.trimRight();//var str_1 = str.trimRight();

( 3 ) JQ方法：$.trim(str)方法

　　$.trim() 函数用于去除字符串两端的空白字符。

　　注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

　　示例：

var str = " 6 6 ";
var str_1 = $.trim(str);
console.log(str_1); //6 6//输出左右侧均无空格

11.position的fixed,absolute,relative的区别。

12.简述一下闭包，以及他的作用。

13.前端性能优化。

详情请看：https://www.cnblogs.com/liulilin/p/7245125.html

减少HTTP请求；
减少对DOM的操作；
使用JSON格式来进行数据交换；
高效合理地使用HTML标签和CSS样式；
使用CDN加速；
精简CSS和JS文件；
压缩图片和使用图片Sprite技术；

14.Bootstrap如何实现响应式布局的，还有别的移动端布局的方案吗？

15.清楚浮动的解决方案。

给父容器触发BFC，overflow:hidden;

	<style type="text/css">
		.box {
			width: 300px;
			margin: 20px auto;
			border: 1px solid red;
			overflow: hidden;
		}
		.left, .right{
			width: 100px;
			height: 200px;
		}
		.left {
			background-color: red;
			float: left;
		}
		.right {
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">1</div>
		<div class="right">2</div>
	</div>
</body>

2.利用clear:both加伪元素::after清除浮动：

	<style type="text/css">
		.box {
			width: 300px;
			margin: 20px auto;
			border: 1px solid red;
		}
		.left, .right{
			width: 100px;
			height: 200px;
		}
		.left {
			background-color: red;
			float: left;
		}
		.right {
			background-color: green;
			float: left;
		}
		.box::after {
			content: "";
			display: block;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">1</div>
		<div class="right">2</div>
	</div>
</body>

3.给父元素设置高度；

4.给父元素也添加浮动；

16.设计模式。

https://www.cnblogs.com/yangguoe/p/8459312.html

校招笔试题1

北京36氪笔试

盖娅娱乐

猜你喜欢