JavaScript 综合案例—表白墙
预期效果
**需求：**按要求在文本框中输入内容，点击提交按钮，输入内容显示在页面下方；
| 完整代码 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙留言板</title><script src="js/jquery-3.7.1.min.js"></script><style>.container {width: 350px; /* 固定容器宽度（与之前分析的 .row 同宽） */height: 300px; /* 固定容器高度（内容超长时需处理溢出） */margin: 0 auto; /* 水平居中（需父级有宽度才能生效） */text-align: center; /* 内部文本居中（影响行内元素和文本） */}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input { /* 选择所有 class 包含 "container" 元素下的 class 包含 "row" 的后代元素中的 input 元素 */width: 260px; /* 设置输入框固定宽度为 260 像素 */height: 30px; /* 设置输入框固定高度为 30 像素 */}#submit {/* 选中 id 为 "submit" 的 HTML 元素 */width: 350px; /* 元素宽度 350 像素（与之前 .container .row 同宽） */height: 40px; /* 元素高度 40 像素（与父容器 .row 同高） */background-color: orange; /* 背景色为橙色（常用警示/强调色） */color: white; /* 文字颜色白色（高对比度确保可读性） */border: none; /* 移除默认边框（常用于按钮美化） */margin: 10px; /* 外间距 10 像素（与其他元素保持距离） */border-radius: 5px; /* 5 像素圆角（现代扁平化风格） */font-size: 20px; /* 大号文字（适合按钮主操作） */}</style>
</head>
<body><div class="container"><h1 >表白墙</h1></br><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span><input type="text" id="from"></div><div class="row"><span>对谁:</span><input type="text" id="to"></div><div class="row"><span>说什么:</span><input type="text" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"></div><script src="js/jquery-3.7.1.min.js"></script><script>function submit(){let from = $("#from").val();let to = $("#to").val();let say = $("#say").val();if(from === "" || to === "" || say === ""){return;}let html = "<div>" + from + "对" + to + "说" + say + "</div>"$(".container").append(html);$("#from").val("");$("#to").val("");$("#say").val("");}</script>
</body>
</html>
第一步：写页面
通过 HTML 代码，我们就作出了这个页面的基本骨架，接下来，需要使用 CSS 对页面进行润色：
首先，我们把整个表白墙的页面放到一个 div 容器中，避免后续的调整导致部分元素排版混乱：
接下来，我们调整整个页面，通过 CSS 类选择器，选中 class = container 的整个页面，分别设置页面的宽度，高度，外边距（自适应），以及居中：
保存代码，打开页面：
接下来，通过类选择器，让说明的字体变成灰色：
尺寸约束
- 固定宽度
350px+ 高度40px→ 容器内容超出时可能溢出（需额外处理）Flex 布局
display: flex使其直接子元素成为 Flex Items（弹性项目）- 默认水平排列（
flex-direction: row）主轴对齐
justify-content: space-between实现：
- 第一个子元素靠左 ▶️
- 最后一个子元素靠右 ▶️
- 中间子元素等间距分布（如图示）
|◀️ 子元素1 ▶️| |◀️ 子元素2 ▶️| |◀️ 子元素3 ▶️|交叉轴对齐
align-items: center使所有子元素在垂直方向上居中
保存代码，打开页面：
第二步：完善页面功能
| 完善提交按钮 |
我们先来完善点击提交按钮后，会执行的操作 submit() ，并且希望拿到三个文本框中输入的内容，因此为三个 Input 标签设置 id 属性并赋值：
点击提交按钮，先拿到上面三个文本框中输入的内容：
我们先对拿到的信息进行判断，如果三个信息中任意一个为空串，则直接返回：
===表示比较相等，不会进行隐式转换；
在按下提交按钮后，我们希望在提交按钮下方出现谁对谁说的话；
所以我们先定义一个变量 html ，用于拿到三个文本框拼接的内容，并且显示在提交按钮下方：
保存代码，打开页面：
我们可以看到，在表白墙提交之后，文本框的内容并没有清空，所以我们需要继续改进：
在页面中添加拼接内容后，我们要清空文本框：
我们的简单表白墙代码就完成了！
