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.设计模式。