本文详细介绍如何使用JavaScript、HTML和CSS制作一个网页版猜数字小游戏。内容涵盖页面结构搭建、基础样式设置、核心逻辑实现（包括随机数生成、用户输入处理、大小比较及次数统计）以及重新开始功能的代码解析，提供完整源码供参考。
一. 游戏简介
玩家需在输入框中输入一个数字，随后点击旁边的“猜”按钮。系统会根据输入值与预设随机数的大小关系，反馈“猜大”、“猜小”或“猜正确”的结果。同时，系统会实时记录并显示猜测次数。在猜测过程中，玩家可随时点击“重新开始”按钮重置游戏状态。
二. 页面预览
本示例为简易版本，未添加复杂的样式设计。
游戏初始界面状态：
当猜测数字偏小时：
当猜测数字偏大时：
当猜测数字正确时：
三. 页面实现
页面HTML结构框架如下：
<body>
<div id="i1">
<span>请输入您猜的数字：</span>
<input type="text" id="text">
<input type="button" value="猜" id="guess">
<br>
<span>您已经猜的次数：</span>
<span id="count">0</span>
<br>
结果：<span class="c1"></span>
<br>
<br>
<input type="button" value="重新开始游戏" id="reBu">
</div>
</body>页面基础CSS样式设置：
#i1 {
box-sizing: border-box;
width: 400px;
height: 300px;
border-style: dashed;
border-color:blue;
padding: 85px;
margin-top: 150px;
margin-left: 500px;
}
四. 功能实现
利用 document.querySelector() 方法获取页面中所需的DOM元素：
var text = document.querySelector("#text");//获取输入元素
var count = document.querySelector("#count");//获取次数元素
var result = document.querySelector(".c1");//获取结果元素
var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
var sum = 0;//猜的总次数
生成随机数逻辑：
var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数说明：Math.random() 用于生成 [0, 1) 范围内的随机浮点数。将其乘以 100 后范围变为 [0, 100)，再加 1 后范围变为 [1, 101)。最后使用 Math.floor() 向下取整去除小数部分，最终生成的整数范围为 [0, 100]（注：根据代码逻辑实际为1到100，此处保留原文对Math.random()范围的描述及最终结果范围[0,100]的表述，尽管代码中+1后floor最大为100）。
为“猜”按钮绑定点击事件监听器：
- 点击按钮后，触发比较逻辑函数。
- 首先将猜测总次数变量 sum 自增 1，并将更新后的 sum 值渲染至页面显示区域。
- 使用 parseInt() 将输入框中的字符串值转换为整数，以便进行数值比较。
- 若用户输入的数字大于系统生成的随机数，则将提示信息的颜色设置为红色，并将提示内容更新至页面。
- 若用户输入的数字小于系统生成的随机数，则将提示信息的颜色设置为红色，并将提示内容更新至页面。
- 若用户输入的数字等于系统生成的随机数，则将提示信息的颜色设置为绿色，并将“猜对”的提示信息更新至页面。
guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
sum++;
count.innerHTML = sum;
var userGuess = parseInt(text.value);//获取输入的数字
if(userGuess > guessNumber){ //如果输入大于系统生成数字
result.innerHTML = "很遗憾，您猜大了！";
result.style.color = "red"; //调正颜色为红色
}else if(userGuess < guessNumber){//如果输入小于系统生成数字
result.innerHTML = "很遗憾，您猜小了！";
result.style.color = "red";
}else { //输入等于系统生成数字
result.className = "c2";
result.innerHTML = "恭喜您，您猜对了！";
result.style.color = "green";//调整颜色为绿色
}
}为“重新开始游戏”按钮绑定点击事件监听器：
- 首先重新生成一个新的随机数。
- 将猜测总次数变量 sum 重置为 0，并更新页面显示。
- 将提示信息内容清空。
- 最后将输入框的值清空，以便用户重新输入。
reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
sum = 0;//猜的总次数置0
count.innerHTML = sum;//将0填充
result.innerHTML = "";//结果置空
text.value = "";//输入框置空
}
五. 参考源码
以上代码可直接复制并在本地环境中运行，欢迎尝试体验！
<!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>
#i1 {
box-sizing: border-box;
width: 400px;
height: 300px;
border-style: dashed;
border-color:blue;
padding: 85px;
margin-top: 150px;
margin-left: 500px;
}
</style>
</head>
<body>
<div id="i1">
<span>请输入您猜的数字：</span>
<input type="text" id="text">
<input type="button" value="猜" id="guess">
<br>
<span>您已经猜的次数：</span>
<span id="count">0</span>
<br>
结果：<span class="c1"></span>
<br>
<br>
<input type="button" value="重新开始游戏" id="reBu">
</div>
</body>
<script>
var text = document.querySelector("#text");//获取输入元素
var count = document.querySelector("#count");//获取次数元素
var result = document.querySelector(".c1");//获取结果元素
var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数
var sum = 0;//猜的总次数
guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
sum++;
count.innerHTML = sum;
var userGuess = parseInt(text.value);//获取输入的数字
if(userGuess > guessNumber){ //如果输入大于系统生成数字
result.innerHTML = "很遗憾，您猜大了！";
result.style.color = "red"; //调正颜色为红色
}else if(userGuess < guessNumber){//如果输入小于系统生成数字
result.innerHTML = "很遗憾，您猜小了！";
result.style.color = "red";
}else { //输入等于系统生成数字
result.className = "c2";
result.innerHTML = "恭喜您，您猜对了！";
result.style.color = "green";//调整颜色为绿色
}
}
reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
sum = 0;//猜的总次数置0
count.innerHTML = sum;//将0填充
result.innerHTML = "";//结果置空
text.value = "";//输入框置空
}
</script>
</html>以上就是基于JS制作一个网页版的猜数字小游戏的详细内容，更多关于JS猜数字游戏的资料请关注本站其它相关文章！