文章目录
表白墙
表白墙要有三个输入框和与三条输入框对应的文本，最后还要有一个提示的信息，以及一个提交的按钮。
<body>
<h1>表白墙</h1>
<p>输入后点击提交，会将信息显示到表格中</p>
<span>谁：</span>
<input type="text">
<span>对谁：</span>
<input type="text">
<span>说：</span>
<input type="text">
<button>提交</button>
</body>
1. 页面的实现
可以看到此时的效果虽然达到了要求，但是不好看。
因此，要引入样式来将它变的好看，最终会形成一个下面的效果。
先将几个输入框进行简单的布局。
<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 后，就可以实现以下的效果。
接下来是将 表白墙 三个字水平居中。
h1 {
text-align: center;
}
接下来让 “输入后点击提交，会将信息显示到表格中” 这句话也水平居中。
然后将这句话的颜色改变一下。
p {
text-align: center;
color: #666;
}
根据上面的最终效果图可以发现，三个输入框与一个按钮分别占四行。
因此这里要使用 四个 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;
}
接下来要设置水平与垂直方向居中
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
可以看到输入框不是整齐的，接下来就是要将输入框对齐。
.row span {
width: 80px;
}
.row input {
width: 200px;
}
现在设置输入框的高度。
height: 30px;
接下来就是对按钮的设置。首先将浏览器的默认样式去掉。
/* 这是通配符选择器，可以选中页面的所有元素 */
* {
/* 消除浏览器的默认样式 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
此时发现图中圈出的部分间距太大了，此时可以对其进行调整。
h1 {
text-align: center;
margin: 20px auto;
}
p {
text-align: center;
color: #666;
margin: 20px auto;
}
接下来对按钮宽度、高度、颜色进行设置。
.row button {
width: 280px;
height: 30px;
color: white;
background-color: orange;
}
可以看到上面按钮是有一个边框的，接下来要把边框去掉。
border: none;
如果此时点击按钮，是看不到效果的，也就无法确定是不是点击到了。
所以此时，设置一个点击按钮的反馈效果。
.row button:active {
background-color: #666;
}
点击按钮后，背景色就会更改。
整体代码
<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 放到如下代码的的后边。
先要选中当前的 container
let containerDiv = document.querySelector('.container');
将新的 div 添加到 选中的 container 当中。
containerDiv.appendChild(rowDiv);
可以看到此时就达成了我们想要的效果。
但是此时有一个地方的设计是不合理的，那就是当前点击提交后，为了方便下一次的输入，
输入框里的内容应该是清空的。
3、清楚之前的输入框内容
// 3.清楚之前输入框里的内容
for (let input of inputs) {
input.value = '';
}
可以看到点击提交后，输入框里的信息就清空了。
但是现在依然有一个问题，那就是如果输入框里没有内容，点击提交后也还是会有信息显示出来。
当然这显然是不合适的，所以现在就要进行一个判定，来判定当前的输入框是不是空的。
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>