前端面试题

最新推荐文章于 2020-06-19 16:10:45 发布

weixin_30663471

最新推荐文章于 2020-06-19 16:10:45 发布

阅读量127

点赞数

文章标签：前端 json ViewUI

原文链接：http://www.cnblogs.com/meetuj/p/11429055.html

版权

1、简述以下常见标签的语义以及默认的display值：p, li, ul, form, b，img，这几个dispaly值的区别是什么？

p 段落 display: block;

li 列表 display: block;

ul 列表 display: block;

form 表单 display: block;

b 粗体 display: inline;

img 图片 display: inline-block;

 

区别：

block元素

 1、如果没有设置宽度会自动填满父容器

 2、可以应用margin/padding

 3、如果没有设置高度会拓展高度，包含常规流子元素

 4、处于常规流前后元素独占水平空间

 5、忽略vertical-align

inline元素

 1、水平方向从左到右依次布局

 2、margin/padding 在垂直方向无效，在水平方向有效

 3、不会再元素前后换行

 4、浮动或绝对定位自动转换成 block

 5、vertical-align属性无效

 6、元素宽度由元素内容决定

inline-block 元素

 1、可以设置宽高

 2、其他基本同 inline元素属性

2、写一个布局：要求：整体尺寸等于浏览器窗口的尺寸，设置最小高度和最小宽度，

顶栏高度固定50px, 侧栏宽度固定200px, 内容部分占据剩余的空间，

如图：


<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<style type="text/css">

    * {

        margin: 0;

        padding: 0;

        font: normal 14px "Microsoft YaHei";

    }

    html,body {

        height: 100%;

        overflow: hidden;

        border: none;

    }  

    .layout {

        position: relative;

        z-index: 0;

        min-width: 1260px;

        min-height: 600px;

    }

    .layout-top {

        height: 50px;

        width: 100%;

        border:1px solid #000;

    }

    .layout-sider {

        position: absolute;

        left: 0;

        top: 50px;

        bottom: 0;

        width: 200px;

        float: left;

        border-right: 1px solid #000;

    }

    .accordion {

        position: absolute;

        left: 0;

        top: 0;

        bottom: 0;

        width: 200px;

        height: auto;

        overflow-y: auto;

        overflow-x: hidden;

    }

    .accordion .accordion-menus {

        text-align: center;

        font-size: 1em;

    }

    .accordion .accordion-menus li {

        height: 40px;

        line-height: 36px;

        transition: border-left 220ms ease-in;

    }

    .layout-right {

        position: absolute;

        left: 200px;

        top: 50px;

        right: 0;

        bottom: 0;

    }

</style>

 

<body class="layout">

    <div class="layout-top"></div>

    <div class="layout-sider">

        <div class="accordion">

            <ul class="accordion-menus">

                <li>caidan1</li>

                <li>caidan2</li>

            </ul>

        </div>

    </div>

    <div class="layout-right">

        <iframe id="rightMain" scrolling="auto" frameborder="0" src="" style="width:100%;height:100%;"></iframe>

    </div>

</body>

 

</html>

3、有哪些方法可以隐藏元素？

 1、display:none;

 2、visibility: hidden;

 3、opacity: 0;

4、什么是跨域？都有哪些方式可以进行跨域？

 跨域就是不同域名下的通信来往。

 跨域方式：

  1、jsonp 请求

  2、 HTML5新规范的CORS功能,只要目标服务器返回请求头部**Access-Control-Allow-Origin: *** 即可

  3、通过内部服务器代理，实现跨域

  4、<img>,<script>,<link>,<iframe>，通过src，href属性设置为目标url,实现跨域请求

5、简述jsonp的原理

 通过<script>标签没有跨域限制来进行数据交互。

       就是提供一个回调函数接受json数据，在浏览器中执行并处理穿过来的数据。

6、如何设计一个轮播插件，用伪代码简述思路

 初始化让所有的图片样式

  z-index:0,display:none

 默认第一个图片显示 z-index:4,display:block

 

 t = setInterval(move, 5000);

 function move() {

      num++;

      if (num == imglen) {

         num = 0;

      };

      show(num);

   };

 

 function show(index) {

  给index当前元素添加活动类显示隐藏

 }

 

 鼠标放在容器时，清除t，离开继续执行 t = setInterval(move, 5000);

7、如何实现一个移动端"tap"事件


    function tap(d,callback) {

        var startTime = 0,

            delayTime = 200,

            isMove = false;

 

        d.addEventListener("touchstart",function(){

            startTime = Date.now();

        },false)

 

        d.addEventListener("touchmove",function(){

            isMove = true;

        },false)

 

        d.addEventListener("touchend",function(){

            if(isMove) return;

            if(Date.now()-startTime>delayTime) return;

            callback();

        },false)

    }

8、前端有哪几种本地存储方式，简述各自的特点

 localStorage、 sessionStorage、 cookie、web sql

 

 localStorage:

  1、有效期永久

  2、同源可以读取并修改localStorage数据

 sessionStorage:

  1、有效期顶层窗口关闭前

  2、值允许同一窗口访问

 cookie：

  1、有效期可以设置

  2、cookie作用域通过文档源和文档路径来确定

  3、储存数据量小

 web sql：

  1、可以储存大量结构化数据

9、写一个js函数，实现对一个数字每3位加一个逗号，如输入100000，输出100,000

 function farmat(mun) {

        if (mun === null) return;

        var m = parseInt(mun).toString();

        var len = m.length;

        if (len <= 3) return m;

        var n = len % 3;

        if (n > 0) {

            return m.slice(0,n)+","+m.slice(n,len).match(/\d{3}/g).join(",")

        } else {

            return m.slice(n,len).match(/\d{3}/g).join(",")

        }

    }

    var a =farmat(100000)

    console.log(a);

10、简述常见的http状态码

 200 请求成功

 404 Not Found

 500 服务端错误

11、什么是事件代理，它的实现原理是什么？

 通过事件冒泡，指定一个事件处理程序，就可以管理某一类型事件。

 原理就是事件从最深节点开始逐步向上传播事件。

转载于:https://www.cnblogs.com/meetuj/p/11429055.html

weixin_30663471

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

1、简述以下常见标签的语义以及默认的display值：p, li, ul, form, b，img，这几个dispaly值的区别是什么？p 段落 display: block;li 列表 display: block;ul 列表 display: block;form 表单 display: block;b 粗体 display: inline;img 图片 di...
复制链接

扫一扫