李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

某公司上机面试题 ​

题目 ​

html
<!DOCTYPE html>
<html>
  <head>
    <title>fe机试2023</title>
    <style>
      * {
        margin: 0px;
        padding: 0;
      }
      .left,
      .right {
        background: orange;
      }
      .center {
        background: palegreen;
      }
      /*
        补全样式实现以下布局效果（同时满足）:
        1、左右固定200px，中间自适应宽
        2、屏幕总宽度<=500px时，隐藏左div
      */
      /* coding start... */

      /* coding end... */
    </style>
  </head>
  <body>
    <h3>实现三列宽度自适应布局</h3>
    <div class="wrap" onclick="openDialog()">
      <div class="left">我是左边</div>
      <div class="center">我是中间</div>
      <div class="right">我是右边</div>
    </div>
  </body>
  <script>
    // 补全以下类和function，实现效果（同时满足）：
    // 1、在openDialog触发时，弹出屏幕居中的dialog
    // 2、dialog内容是对应div的innerText，比如「我是右边」
    // 3、点击dialog以外部分，关闭dialog

    class Dialog {
      /* coding start... */
      /* coding end... */
    }

    const dialogInstance = new Dialog();
    const openDialog = () => {
      /* coding start... */
      /* coding end... */
    };
  </script>
</html>

我的答案 ​

html
<!DOCTYPE html>
<html>
  <head>
    <title>fe机试2023</title>
    <style>
      * {
        margin: 0px;
        padding: 0;
      }
      .left,
      .right {
        background: orange;
      }
      .center {
        background: palegreen;
      }
      /* 
        补全样式实现以下布局效果（同时满足）:
        1、左右固定200px，中间自适应宽
        2、屏幕总宽度<=500px时，隐藏左div
      */
      /* coding start... */

      html,
      body {
        height: 100%;
      }

      .wrap {
        display: flex;
        /* height: 100vh; */
        overflow-y: auto;
        overflow-x: hidden;
      }
      .left,
      .right {
        flex: 0 0 200px;
      }

      .center {
        flex: 1;
      }

      @media only screen and (max-width: 500px) {
        .left {
          display: none;
        }
      }

      /* coding end... */
    </style>
  </head>
  <body>
    <h3>实现三列宽度自适应布局</h3>
    <div class="wrap" onclick="openDialog(event)">
      <div class="left">我是左边</div>
      <div class="center">我是中间</div>
      <div class="right">我是右边</div>
    </div>
  </body>
  <script>
    // 补全以下类和function，实现效果（同时满足）：
    // 1、在openDialog触发时，弹出屏幕居中的dialog
    // 2、dialog内容是对应div的innerText，比如「我是右边」
    // 3、点击dialog以外部分，关闭dialog

    class Dialog {
      /* coding start... */
      constructor() {
        this.dialog = document.createElement('div');
        this.dialog.style.position = 'fixed';
        this.dialog.style.left = '50%';
        this.dialog.style.top = '50%';
        this.dialog.style.transform = 'translate(-50%, -50%)';
        this.dialog.style.background = 'palegreen';
        this.dialog.style.padding = '20px';
        this.dialog.style.zIndex = '100';
        this.dialog.style.width = '60vw';
        this.dialog.style.display = 'none';

        document.body.appendChild(this.dialog);
      }
      open(content) {
        this.dialog.innerText = content;
        if (this.dialog.style.display === 'blobk') {
          return;
        }
        this.dialog.style.display = 'block';

        document.addEventListener('click', this.onClickOut);
      }

      close() {
        this.dialog.style.display = 'none';
        document.removeEventListener('click', this.onClickOut);
      }

      onClickOut = (event) => {
        if (!this.dialog.contains(event.target)) {
          this.close();
        }
      };
      /* coding end... */
    }

    const dialogInstance = new Dialog();
    const openDialog = (event) => {
      /* coding start... */
      event.stopPropagation();
      dialogInstance.open(event.target.innerText);
      /* coding end... */
    };

    // document.querySelector(".wrap").addEventListener("click", openDialog);
  </script>
</html>