JavaScript 实现一个表白墙案例-蒲公英云

文章目录

表白墙
- 1. 页面的实现
- 1. js 逻辑的实现

表白墙

表白墙要有三个输入框和与三条输入框对应的文本，最后还要有一个提示的信息，以及一个提交的按钮。

<body>
    <h1>表白墙</h1>
    <p>输入后点击提交，会将信息显示到表格中</p>
    <span>谁：</span>
    <input type="text">
    <span>对谁：</span>
    <input type="text">
    <span>说：</span>
    <input type="text">
    <button>提交</button>
</body>

3d958bf5df2340bdb49fdb754dec7ec2.png_pic_center

1. 页面的实现

可以看到此时的效果虽然达到了要求，但是不好看。
因此，要引入样式来将它变的好看，最终会形成一个下面的效果。

29c80ffbbac34d58b1f2ddbd6fb6b9c0.png_pic_center

先将几个输入框进行简单的布局。

<div class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交，会将信息显示到表格中</p>
    <span>谁：</span>
    <input type="text">
    <span>对谁：</span>
    <input type="text">
    <span>说：</span>
    <input type="text">
    <button>提交</button>
</div>

如上面代码所示，将之前的写的代码放到一个 div 标签里。

<style>
     .container {
         width: 600px;
         margin: 0 auto;
     }
 </style>

引入了 container 后，就可以实现以下的效果。

d2e194bcf8494dd5a4d28209beb097e8.png_pic_center

接下来是将表白墙三个字水平居中。

h1 {
     text-align: center;
 }

454c77244d6a4339b96eb495cd45067c.png_pic_center

接下来让 “输入后点击提交，会将信息显示到表格中” 这句话也水平居中。
然后将这句话的颜色改变一下。

p {
     text-align: center;
     color: #666;
  }

33a4c1244b0d4d28a09d3ffc6fdb44a7.png_pic_center

根据上面的最终效果图可以发现，三个输入框与一个按钮分别占四行。
因此这里要使用四个 div 标签，分别将它们包含起来。

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示到表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>
    </div>
</body>

接下来是设置 row，开启弹性布局。

.row {
       /* 开启弹性布局 */
       display: flex;
       height: 40px;
 }

dd4e8c36a156404f8632004c33220b9b.png_pic_center

接下来要设置水平与垂直方向居中

/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;

a287f28db3c043929d4dca4642a131d2.png_pic_center

可以看到输入框不是整齐的，接下来就是要将输入框对齐。

.row span {
    width: 80px;
}
.row input {
    width: 200px;
}

14aff44f554547c1899e2850bf034f2c.png_pic_center

现在设置输入框的高度。

height: 30px;

82898b3ff1124807978ece68627e78f2.png_pic_center

接下来就是对按钮的设置。首先将浏览器的默认样式去掉。

/* 这是通配符选择器，可以选中页面的所有元素 */
 * {
     /* 消除浏览器的默认样式 */
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

9efcbe9c2c3b4e4695f79ebb6217cb2f.png_pic_center

此时发现图中圈出的部分间距太大了，此时可以对其进行调整。

h1 {
     text-align: center;
     margin: 20px auto;
 }
 p {
    text-align: center;
    color: #666;
    margin: 20px auto;
 }

3707612ae0594af0abe3880da72eca8b.png_pic_center

接下来对按钮宽度、高度、颜色进行设置。

.row button {
     width: 280px;
     height: 30px;
     color: white;
     background-color: orange;
 }

cbec48d422a94fb0b811680e7252c9e6.png_pic_center

可以看到上面按钮是有一个边框的，接下来要把边框去掉。

border: none;

755559dddd5146a3b08cf3bc7c20e90b.png_pic_center

如果此时点击按钮，是看不到效果的，也就无法确定是不是点击到了。

所以此时，设置一个点击按钮的反馈效果。

.row button:active {
     background-color: #666;
 }

ab8ca924f0ce4cb789780edb438bfcc8.png_pic_center

点击按钮后，背景色就会更改。

整体代码

<style>
        /* 这是通配符选择器，可以选中页面的所有元素 */
        * {
            /* 消除浏览器的默认样式 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 600px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin: 20px auto;
        }
        p {
            text-align: center;
            color: #666;
            margin: 20px auto;
        }
        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }
        .row span {
            width: 80px;
        }
        .row input {
            width: 200px;
            height: 30px;
        }
        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            border: none;
        }
        .row button:active {
            background-color: #666;
        }
    </style>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示到表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>
    </div>
</body>

2. js 逻辑的实现

我们希望的是在输入框中输入一些信息，点击提交后，会显示出输入的信息。

点击的时候获取到三个输入框的文本内容，创建一个新的 div.row，将内容放到这个新的div 中。

首先，选中三个输入框和一个按钮

let inputs = document.querySelectorAll('input');
let button = document.querySelector('button');

接下来就是根据点击来设置一个事件响应。

1、首先是获取是三个输入框中的内容。

button.onclick = function() {
    // 1.获取到三个输入框的内容
    let from = inputs[0].value; // 表示是谁说的
    let to = inputs[1].vlaue;   // 表示对谁说的
    let what = inputs[2].vlaue; // 表示说的是什么
}

2、构造一个新 div

这个 div 是一个空的，没有属性的 div，所以要让它有属性。

rowDiv.className = 'row'; // 有了一个 row 的属性

然后还要让它有内容，要将三个输入框中的内容组成一句话放到这个新的 div 中。

rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + what;

接下来不要忘记了把这个新的 div 放到如下代码的的后边。

c9bd7f70f8544e66b7c3c094f9cfe0b9.png_pic_center

先要选中当前的 container

let containerDiv = document.querySelector('.container');

将新的 div 添加到选中的 container 当中。

containerDiv.appendChild(rowDiv);

39d08b22a29940469c1480d96ef7c24a.png_pic_center
可以看到此时就达成了我们想要的效果。

但是此时有一个地方的设计是不合理的，那就是当前点击提交后，为了方便下一次的输入，
输入框里的内容应该是清空的。

3、清楚之前的输入框内容

// 3.清楚之前输入框里的内容
for (let input of inputs) {
    input.value = '';
}

09ef04c287e64d2b84e85249f96c87a4.png_pic_center
可以看到点击提交后，输入框里的信息就清空了。

但是现在依然有一个问题，那就是如果输入框里没有内容，点击提交后也还是会有信息显示出来。
当然这显然是不合适的，所以现在就要进行一个判定，来判定当前的输入框是不是空的。

941703399167406f8cf77d3f2355bc0a.png_pic_center

if (from == '' || to == '' || what == '') {
     return;
 }

此时如果输入框里没有内容，也不在会显示了。

整体代码

<script>
     // 先选中三个输入框和一个按钮
     let inputs = document.querySelectorAll('input');
     let button = document.querySelector('button');
     let containerDiv = document.querySelector('.container');
     button.onclick = function() {
         // 1.获取到三个输入框的内容
         let from = inputs[0].value; // 表示是谁说的
         let to = inputs[1].value;   // 表示对谁说的
         let what = inputs[2].value; // 表示说的是什么
         if (from == '' || to == '' || what == '') {
             return;
         }
         // 2.构造一个新 div 
         let rowDiv = document.createElement('div');
         rowDiv.className = 'row'; // 有了一个 row 的属性
         rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + what;
         containerDiv.appendChild(rowDiv); 
         // 3.清楚之前输入框里的内容
         for (let input of inputs) {
             input.value = '';
         }
     }
 </script>