2018秋招前端笔试题（58同城）

Bertha 。 2022-05-19 06:41 300阅读 0赞

## 填空题 ##

1.  号码段为131到139的11位手机号码正则校验：/^13\[1-9\]\[0-9\]\{8\}$/
2.  移动端，如何在html中通过链接调起拨打电话：’`<a href="tel:10086">10086</a>'`
3.  一下代码的输出结果：

{
    var t='teacher';
    let s='student'
    }
    console.log(t);
    console.log(s);

1.  HTTP协议的状态码200，400，500分别代表什么？请求成功、（错误请求） 服务器不理解请求的语法，（服务器内部错误） 服务器遇到错误，无法完成请求
2.  JavaScript算术运算：‘10’+ 1结果为‘101’ ‘10’-1结果为‘9’
3.  var ting = 1, shi=3, wei=2;用ES6字符串模板的方式输出：1室3厅2卫。`${ting}室${shi}厅${wei}卫`
4.  用ES6解构的方式，将下面代码中的obj.name赋值给n，obj.age赋值给a：let \{name: n, age: a\} = obj; let obj = \{name:’韩梅梅’, age:’20’\};let n, a;
5.  HTTP协议默认的端口号‘80\_\_HTTPS协议的端口号443
6.  名词解释：MVCmodel-view-controller 、MVPmodel-view-presenter 、MVVMmodel-view-viewmodel
7.  Flex布局实现容器box内部元素item垂直居中对齐。. box \{display: flex; align-items: center \}

## 简答题 ##

1.  CSS3的box-sizing的取值及各值的说明。  
    content-box CSS2.1 规定的宽度和高度的行为。在宽度和高度之外绘制元素的内边距和边框。  
    border-box通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。  
    inherit规定应从父元素继承 box-sizing 属性的值。
2.  请写出下列代码的执行结果：

function switchCase(value) { 
                switch(value) {
                    case '0':
                        console.log('case 0');
                    case '1':
                        console.log('case 1');
                        break;
                    case undefined:
                        console.log('undefined');
                        break;
                    default:
                        console.log('default');
                }
            }
            // 写出下列输出结果 
            switchCase(0);
            switchCase('0');
            switchCase();

switchCase(0);default  
switchCase(‘0’);“case 0”,”case 1”  
switchCase();undefined

*  列举出通过CSS样式隐藏元素的方法，并说明其区别  
    **（1）:Opacity**设置为0  
    **（2）visibility**设置为hidden  
    **（3）display**设为 none  
    **（4）position** 设为 absolute 然后将位置设到不可见区域。  
    **（5）Clip-path**

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">添加的任何动画效果交互效果</th> 
   <th align="right">是否对网页布局起作用</th> 
   <th>是否占据之前的位置</th> 
   <th>对子元素和元素内容</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Opacity</td> 
   <td align="center">起作用</td> 
   <td align="right">是</td> 
   <td>是</td> 
   <td>背景和元素内容会跟着变化</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>visibility</td> 
   <td align="center">不会响应任何用户交互</td> 
   <td align="right">是</td> 
   <td>是</td> 
   <td>有影响，想要显示的子元素添加visibility：visible</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>display</td> 
   <td align="center">不起作用</td> 
   <td align="right">否</td> 
   <td>否</td> 
   <td>它的子元素也会一同从盒子模型中消失</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>Clip-path</td> 
   <td align="center">鼠标悬停或者点击在剪裁区域之外也不可能生效</td> 
   <td align="right">是</td> 
   <td>是</td> 
   <td></td> 
   <td>在IE中是完全不支持的</td> 
  </tr> 
  <tr> 
   <td>Position</td> 
   <td align="center">起作用</td> 
   <td align="right">否</td> 
   <td>否</td> 
   <td></td> 
   <td>主要是通过控制方向，达到一定的值，离开当前可视界面</td> 
  </tr> 
 </tbody> 
</table>

\- 请写出下面代码的执行结果

*  列出移动端开发中适配各种屏幕尺寸的解决方案(至少3种)  
    **（1）响应式布局**简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。  
    **（2）Cover布局**就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计  
    **（3）Contain布局**同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。  
    **（4）样式缩放**最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。  
    **（5）Rem缩放**  
    Rem是个好东西呀，谁用谁知道，这里就不多做解释了。原理跟上面的样式缩放相通，只不过是通过Rem为单位来进行视觉开发，然后通过计算后改变html的front-size来对页面进行缩放。关于以Rem为单位进行开发，目前比较流行Font-size=62.5%，而后1rem=10px的这种方法，有试过直接换成px也是可以的，就看个人的计算习惯吧。
 *  用js实现一个随机打乱数组顺序的函数，要求可以设定数组种任意1个元素的位置不变，其他位置的元素位置随机变化。s
 *  用js实现一个比较APP版本号的大小的函数，版本号各市由数字和.组成。例如：1.1.0、1.10、1.2.3等。