21.前端入门必看！猜数字小游戏和表白墙的完整代码实现
目录
一、 案例一：猜数字小游戏
1. 预期效果
2. 完整代码实现
二、 案例二：表白墙
1. 预期效果
2. 完整代码实现
三、 总结
今天给大家分享两个非常经典的 HTML + JavaScript 入门级实战小案例。一个是互动性很强的“猜数字小游戏”，另一个是充满浪漫气息的“表白墙”。这两个案例非常适合初学者用来巩固 DOM 操作和事件绑定，话不多说，直接上干货！
一、 案例一：猜数字小游戏
这个游戏的功能很简单：系统随机生成一个 1-100 的数字，用户输入猜测的数字，点击“猜”按钮后，系统会提示“猜大了”、“猜小了”或“猜中了”，并统计猜测次数。
1. 预期效果
界面布局非常直观，包含重新开始游戏的按钮、输入框、猜的按钮以及显示次数和结果的区域。
2. 完整代码实现
为了让你看得更清楚，我按照结构、样式和脚本的顺序把代码贴出来。
HTML 结构：
<body> <input class="reset_button" type="button" value="重新开始一局游戏" onclick="reSet()"><br> 请输入要猜的数字：<input type="text" value="0" class="to_guess_num"><input type="button" value="猜" onclick="Guess()"><br> 已经猜的次数：<span class="has_guess_num">0</span><br> 结果：<span class="result"></span><br> </body>JavaScript 逻辑：
<script> // 输入的数字 let to_guess_num_element = document.querySelector('.to_guess_num') console.dir(to_guess_num_element) // 已经猜的次数 let input_num_element = document.querySelector('.has_guess_num') console.dir(input_num_element) // 猜测的结果 let result_element = document.querySelector('.result') console.dir(result_element) function reSet() { to_guess_num_element.value = 0 input_num_element.innerHTML = 0 result_element.innerHTML = "" } let num = Math.floor(Math.random() * 100) + 1; console.log(num) function Guess() { input_num_element.innerHTML = parseInt(input_num_element.innerHTML) + 1 if(num < parseInt(to_guess_num_element.value)) { result_element.innerHTML = "猜大了" result_element.className = 'false' } else if(num > parseInt(to_guess_num_element.value)) { result_element.innerHTML = "猜小了" result_element.className = 'false' } else { result_element.innerHTML = "猜中了" result_element.className = 'true' } } </script>CSS 样式：
<style> .false { color: red; } .true { color: green; } </style>二、 案例二：表白墙
这个案例实现了一个简单的表白墙功能，用户输入“谁”、“对谁”、“说什么”，点击提交后，信息会显示在页面上。
1. 预期效果
界面包含三个输入框和一个提交按钮，输入信息后点击提交，内容会动态添加到页面中。
2. 完整代码实现
HTML 结构：
<body> <div class="container"> <h1>表白墙</h1> <p>输入相关信息，点击提交数据将会展示在表格中</p> <div class="div1"> <span>谁：</span><input type="text" class="edit"> </div> <div class="div1"> <span>对谁：</span><input type="text" class="edit"> </div> <div class="div1"> <span>说：</span><input type="text" class="edit"> </div> <div class="div1"> <input type="button" value="提交" class="submit" onclick="Submit()"> </div> </div> </body>CSS 样式：
<style> * { margin: 0px; padding: 0px; } .container { width: 400px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 40px; } p { text-align: center; color: gray; line-height: 63px; } .div1 { display: flex; justify-content: center; align-items: center; } .edit { margin-bottom: 20px; width: 200px; height: 30px; } span { width: 50px; margin-bottom: 20px; } .submit { background-color: rgb(255, 157, 0); color: white; width: 260px; height: 30px; border: none; border-radius: 5px; } .submit:active { background-color: gray; } </style>JavaScript 逻辑：
<script> function Submit() { let edits = document.querySelectorAll('.edit') console.dir(edits) let from = edits[0].value let to = edits[1].value let message = edits[2].value console.log(from + " " + to + " " + message) let div = document.createElement('div') div.className = "div1" div.innerHTML = from + "对：" + to + "说：" + message console.log(div) let container = document.querySelector('.container') container.appendChild(div) } </script>三、 总结
这两个案例涵盖了 HTML 的基本结构、CSS 的简单样式以及 JavaScript 的核心操作（如querySelector、getElementById、createElement、appendChild等），非常适合初学者练习。希望对你有所帮助，如果有任何问题，欢迎在评论区留言交流！