🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白：个人主页
🔥 个人专栏：✅前端技术 ✅后端技术
🏠 个人博客：洛可可白博客
🐱 代码获取：bestwishes0203
📷 封面壁纸：洛可可白wallpaper
文章目录
- Web实现猜数字游戏：JavaScript DOM基础与实例教程
- JavaScript DOM基础
- 体验地址
- 实例：猜数字游戏
- 创建HTML结构
- 美化样式
- 编写JavaScript逻辑
- 初始化游戏
- 获取页面元素
- 处理提交事件
- 处理再玩一次事件
- 全部代码
- 结语
- 🎉 往期精彩回顾
Web实现猜数字游戏：JavaScript DOM基础与实例教程
猜数字游戏是一个简单而经典的游戏，玩家需要猜测由系统随机生成的一个数字。在本教程中，我们将学习如何使用JavaScript和DOM来实现这个网页版的猜数字游戏，并介绍相关的JavaScript DOM基础知识。
JavaScript DOM基础
DOM（Document Object Model）是HTML文档的编程接口，它允许我们通过JavaScript访问和操作网页的元素。在JavaScript中，我们可以使用DOM API来选取元素、更改内容、绑定事件等。
体验地址
http://8.210.131.139/GuessNumber.html
实例：猜数字游戏
创建HTML结构
首先，我们需要创建一个包含游戏输入区域、结果显示和再玩一次按钮的HTML结构。
<div class="container">
<h1>猜数字游戏</h1>
<div class="input-group">
<label for="guess">请猜一个1~100的整数：</label>
<input type="text" id="guess" />
<button id="submit">提交</button>
</div>
<div class="result"></div>
<div class="message"></div>
<button id="play-again" class="play-again" style="display: none">再玩一次</button>
</div>
美化样式
* {
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.container {
margin: 50px auto;
max-width: 600px;
text-align: center;
background-color: #d1d1d1;
padding: 30px;
border-radius: 10px;
}
h1 {
font-size: 32px;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
font-size: 18px;
padding: 5px;
width: 200px;
border: 1px solid #ccc;
}
button {
font-size: 18px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
.result {
font-size: 24px;
margin-bottom: 20px;
}
.message {
font-size: 18px;
margin-bottom: 20px;
}
.play-again {
font-size: 18px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 auto;
}
.play-again:hover {
background-color: #0062cc;
}
编写JavaScript逻辑
初始化游戏
在JavaScript中，我们首先定义一个变量来存储随机生成的答案。
var answer = Math.floor(Math.random() * 100) + 1;
获取页面元素
使用document.getElementById和document.querySelector来获取页面上的元素。
var input = document.getElementById("guess");
var submitBtn = document.getElementById("submit");
var result = document.querySelector(".result");
var message = document.querySelector(".message");
var playAgainBtn = document.getElementById("play-again");
处理提交事件
为提交按钮绑定点击事件，获取用户输入的数字，并与答案比较。
submitBtn.addEventListener("click", function () {
var guess = parseInt(input.value);
if (isNaN(guess) || guess < 1 || guess > 100) {
result.textContent = "";
message.textContent = "请输入1~100之间的整数！";
} else {
if (guess === answer) {
result.textContent = "恭喜你，猜对了！";
message.textContent = "";
playAgainBtn.style.display = "block";
submitBtn.disabled = true;
} else {
result.textContent = "";
if (guess < answer) {
message.textContent = "太小了，请继续猜！";
} else {
message.textContent = "太大了，请继续猜！";
}
}
}
});
处理再玩一次事件
为再玩一次按钮绑定点击事件，重置游戏状态并允许用户重新开始游戏。
playAgainBtn.addEventListener("click", function () {
answer = Math.floor(Math.random() * 100) + 1;
input.value = "";
result.textContent = "";
message.textContent = "";
playAgainBtn.style.display = "none";
submitBtn.disabled = false;
});
全部代码
<!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>
<style>
* {
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.container {
margin: 50px auto;
max-width: 600px;
text-align: center;
background-color: #d1d1d1;
padding: 30px;
border-radius: 10px;
}
h1 {
font-size: 32px;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
font-size: 18px;
padding: 5px;
width: 200px;
border: 1px solid #ccc;
}
button {
font-size: 18px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
.result {
font-size: 24px;
margin-bottom: 20px;
}
.message {
font-size: 18px;
margin-bottom: 20px;
}
.play-again {
font-size: 18px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 auto;
}
.play-again:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<div class="container">
<h1>猜数字游戏</h1>
<div class="input-group">
<label for="guess">请猜一个1~100的整数：</label>
<input type="text" id="guess" />
<button id="submit">提交</button>
</div>
<div class="result"></div>
<div class="message"></div>
<button id="play-again" class="play-again" style="display: none">
再玩一次
</button>
</div>
<script>
// 生成随机数（1~100之间）
var answer = Math.floor(Math.random() * 100) + 1;
// 获取页面元素
var input = document.getElementById("guess");
var submitBtn = document.getElementById("submit");
var result = document.querySelector(".result");
var message = document.querySelector(".message");
var playAgainBtn = document.getElementById("play-again");
// 处理提交事件
submitBtn.addEventListener("click", function () {
// 获取用户输入的数字
var guess = parseInt(input.value);
// 验证用户输入的数字是否合法
if (isNaN(guess) || guess < 1 || guess > 100) {
result.textContent = "";
message.textContent = "请输入1~100之间的整数！";
return;
}
// 比较用户输入的数字和答案
if (guess === answer) {
result.textContent = "恭喜你，猜对了！";
message.textContent = "";
playAgainBtn.style.display = "block";
submitBtn.disabled = true;
} else if (guess < answer) {
result.textContent = "";
message.textContent = "太小了，请继续猜！";
} else {
result.textContent = "";
message.textContent = "太大了，请继续猜！";
}
});
// 处理再玩一次事件
playAgainBtn.addEventListener("click", function () {
// 重新生成随机数
answer = Math.floor(Math.random() * 100) + 1;
// 清空输入框和提示信息
input.value = "";
result.textContent = "";
message.textContent = "";
// 隐藏再玩一次按钮，启用提交按钮
playAgainBtn.style.display = "none";
submitBtn.disabled = false;
});
</script>
</body>
</html>
结语
通过上述步骤，我们实现了一个简单的猜数字游戏。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。通过这个项目，你可以更好地理解DOM操作的基本概念和方法，以及如何在实际项目中应用它们。猜数字游戏是一个入门级的编程项目，适合初学者练习和提升编程技能。
如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀
🎉 往期精彩回顾
Web实现名言生成器：JavaScript DOM基础与实例教程
- 604阅读 · 16点赞 · 14收藏
Web实现井字棋游戏：JavaScript DOM基础与实例教程
- 502阅读 · 20点赞 · 12收藏
Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程
- 772阅读 · 14点赞 · 7收藏
H5实现Web ECharts教程：轻松创建动态数据图表
- 1123阅读 · 19点赞 · 6收藏
浏览器DOM操作基础：禁用右键菜单与阻止文字选中
- 1013阅读 · 33点赞 · 24收藏
缤纷浏览器 —— 一键换肤，个性随心换（H5实现浏览器换肤效果）
- 593阅读 · 10点赞 · 6收藏
广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）
- 824阅读 · 29点赞 · 24收藏
计算机专业学生的成长之路：超越课堂的自我提升策略
- 850阅读 · 33点赞 · 26收藏
Node.js快速入门：搭建基础Web服务器与实现CRUD及登录功能
- 910阅读 · 31点赞 · 16收藏
Node.js核心命令与工具：提升开发效率的实用指南
- 748阅读 · 11点赞 · 18收藏
爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析
- 1301阅读 · 25点赞 · 30收藏
