目录一、 案例一猜数字小游戏1. 预期效果2. 完整代码实现二、 案例二表白墙1. 预期效果2. 完整代码实现三、 总结今天给大家分享两个非常经典的 HTML JavaScript 入门级实战小案例。一个是互动性很强的“猜数字小游戏”另一个是充满浪漫气息的“表白墙”。这两个案例非常适合初学者用来巩固 DOM 操作和事件绑定话不多说直接上干货一、 案例一猜数字小游戏这个游戏的功能很简单系统随机生成一个 1-100 的数字用户输入猜测的数字点击“猜”按钮后系统会提示“猜大了”、“猜小了”或“猜中了”并统计猜测次数。1. 预期效果界面布局非常直观包含重新开始游戏的按钮、输入框、猜的按钮以及显示次数和结果的区域。2. 完整代码实现为了让你看得更清楚我按照结构、样式和脚本的顺序把代码贴出来。HTML 结构body input classreset_button typebutton value重新开始一局游戏 onclickreSet()br 请输入要猜的数字input typetext value0 classto_guess_numinput typebutton value猜 onclickGuess()br 已经猜的次数span classhas_guess_num0/spanbr 结果span classresult/spanbr /bodyJavaScript 逻辑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 } } /scriptCSS 样式style .false { color: red; } .true { color: green; } /style二、 案例二表白墙这个案例实现了一个简单的表白墙功能用户输入“谁”、“对谁”、“说什么”点击提交后信息会显示在页面上。1. 预期效果界面包含三个输入框和一个提交按钮输入信息后点击提交内容会动态添加到页面中。2. 完整代码实现HTML 结构body div classcontainer h1表白墙/h1 p输入相关信息点击提交数据将会展示在表格中/p div classdiv1 span谁/spaninput typetext classedit /div div classdiv1 span对谁/spaninput typetext classedit /div div classdiv1 span说/spaninput typetext classedit /div div classdiv1 input typebutton value提交 classsubmit onclickSubmit() /div /div /bodyCSS 样式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; } /styleJavaScript 逻辑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等非常适合初学者练习。希望对你有所帮助如果有任何问题欢迎在评论区留言交流
21.前端入门必看！猜数字小游戏和表白墙的完整代码实现
发布时间：2026/6/3 10:19:58
目录一、 案例一猜数字小游戏1. 预期效果2. 完整代码实现二、 案例二表白墙1. 预期效果2. 完整代码实现三、 总结今天给大家分享两个非常经典的 HTML JavaScript 入门级实战小案例。一个是互动性很强的“猜数字小游戏”另一个是充满浪漫气息的“表白墙”。这两个案例非常适合初学者用来巩固 DOM 操作和事件绑定话不多说直接上干货一、 案例一猜数字小游戏这个游戏的功能很简单系统随机生成一个 1-100 的数字用户输入猜测的数字点击“猜”按钮后系统会提示“猜大了”、“猜小了”或“猜中了”并统计猜测次数。1. 预期效果界面布局非常直观包含重新开始游戏的按钮、输入框、猜的按钮以及显示次数和结果的区域。2. 完整代码实现为了让你看得更清楚我按照结构、样式和脚本的顺序把代码贴出来。HTML 结构body input classreset_button typebutton value重新开始一局游戏 onclickreSet()br 请输入要猜的数字input typetext value0 classto_guess_numinput typebutton value猜 onclickGuess()br 已经猜的次数span classhas_guess_num0/spanbr 结果span classresult/spanbr /bodyJavaScript 逻辑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 } } /scriptCSS 样式style .false { color: red; } .true { color: green; } /style二、 案例二表白墙这个案例实现了一个简单的表白墙功能用户输入“谁”、“对谁”、“说什么”点击提交后信息会显示在页面上。1. 预期效果界面包含三个输入框和一个提交按钮输入信息后点击提交内容会动态添加到页面中。2. 完整代码实现HTML 结构body div classcontainer h1表白墙/h1 p输入相关信息点击提交数据将会展示在表格中/p div classdiv1 span谁/spaninput typetext classedit /div div classdiv1 span对谁/spaninput typetext classedit /div div classdiv1 span说/spaninput typetext classedit /div div classdiv1 input typebutton value提交 classsubmit onclickSubmit() /div /div /bodyCSS 样式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; } /styleJavaScript 逻辑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等非常适合初学者练习。希望对你有所帮助如果有任何问题欢迎在评论区留言交流
