JavaScript 实现一个表白墙案例

桃扇骨 2023-10-08 21:04 14阅读 0赞

#### 文章目录 ####

*  表白墙
 *   *  1. 页面的实现
     *  2. 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 标签里。

引入了 **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][]  
  
点击按钮后，背景色就会更改。

**整体代码**

### 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;
     }

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

**整体代码**

[3d958bf5df2340bdb49fdb754dec7ec2.png_pic_center]: https://img-blog.csdnimg.cn/3d958bf5df2340bdb49fdb754dec7ec2.png#pic_center
[29c80ffbbac34d58b1f2ddbd6fb6b9c0.png_pic_center]: https://img-blog.csdnimg.cn/29c80ffbbac34d58b1f2ddbd6fb6b9c0.png#pic_center
[d2e194bcf8494dd5a4d28209beb097e8.png_pic_center]: https://img-blog.csdnimg.cn/d2e194bcf8494dd5a4d28209beb097e8.png#pic_center
[454c77244d6a4339b96eb495cd45067c.png_pic_center]: https://img-blog.csdnimg.cn/454c77244d6a4339b96eb495cd45067c.png#pic_center
[33a4c1244b0d4d28a09d3ffc6fdb44a7.png_pic_center]: https://img-blog.csdnimg.cn/33a4c1244b0d4d28a09d3ffc6fdb44a7.png#pic_center
[dd4e8c36a156404f8632004c33220b9b.png_pic_center]: https://img-blog.csdnimg.cn/dd4e8c36a156404f8632004c33220b9b.png#pic_center
[a287f28db3c043929d4dca4642a131d2.png_pic_center]: https://img-blog.csdnimg.cn/a287f28db3c043929d4dca4642a131d2.png#pic_center
[14aff44f554547c1899e2850bf034f2c.png_pic_center]: https://img-blog.csdnimg.cn/14aff44f554547c1899e2850bf034f2c.png#pic_center
[82898b3ff1124807978ece68627e78f2.png_pic_center]: https://img-blog.csdnimg.cn/82898b3ff1124807978ece68627e78f2.png#pic_center
[9efcbe9c2c3b4e4695f79ebb6217cb2f.png_pic_center]: https://img-blog.csdnimg.cn/9efcbe9c2c3b4e4695f79ebb6217cb2f.png#pic_center
[3707612ae0594af0abe3880da72eca8b.png_pic_center]: https://img-blog.csdnimg.cn/3707612ae0594af0abe3880da72eca8b.png#pic_center
[cbec48d422a94fb0b811680e7252c9e6.png_pic_center]: https://img-blog.csdnimg.cn/cbec48d422a94fb0b811680e7252c9e6.png#pic_center
[755559dddd5146a3b08cf3bc7c20e90b.png_pic_center]: https://img-blog.csdnimg.cn/755559dddd5146a3b08cf3bc7c20e90b.png#pic_center
[ab8ca924f0ce4cb789780edb438bfcc8.png_pic_center]: https://img-blog.csdnimg.cn/ab8ca924f0ce4cb789780edb438bfcc8.png#pic_center
[c9bd7f70f8544e66b7c3c094f9cfe0b9.png_pic_center]: https://img-blog.csdnimg.cn/c9bd7f70f8544e66b7c3c094f9cfe0b9.png#pic_center
[39d08b22a29940469c1480d96ef7c24a.png_pic_center]: https://img-blog.csdnimg.cn/39d08b22a29940469c1480d96ef7c24a.png#pic_center
[09ef04c287e64d2b84e85249f96c87a4.png_pic_center]: https://img-blog.csdnimg.cn/09ef04c287e64d2b84e85249f96c87a4.png#pic_center
[941703399167406f8cf77d3f2355bc0a.png_pic_center]: https://img-blog.csdnimg.cn/941703399167406f8cf77d3f2355bc0a.png#pic_center