猜数字游戏

最新推荐文章于 2025-05-28 19:35:37 发布

前端宸汐~

最新推荐文章于 2025-05-28 19:35:37 发布

阅读量53

点赞数

文章标签：游戏 html 前端

本文链接：https://blog.youkuaiyun.com/m0_56683232/article/details/129824013

版权

这是一个使用HTML和JavaScript编写的猜数字游戏。用户输入猜测的数字，程序会生成1到10之间的随机数，并根据用户输入给出反馈（猜大了、猜小了或猜对了）。用户猜对后可以选择再来一次，游戏会重新生成新的随机数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Document</title>

<style>

#reguess{

display: none;

}

</style>

</head>

<body>

<div id="res"></div>

<input id="num" type="text">

<button id="guess" οnclick="guess()">猜一猜</button>

<button id="reguess" οnclick="reguess()">再来一次</button>

<script>

var _num=document.getElementById("num"); //表单

var _res=document.getElementById("res"); //结果

var _reguess=document.getElementById("reguess"); //结果

//生成随机数

let random=Math.ceil(Math.random()*10);

console.log(random);

// 猜一猜

function guess(){

//获取用户输入值

let num=_num.value*1;

let res=''; //结果

if(num>random){

res="猜大了"

}else if(num<random){

res="猜小了"

}else{

res="猜对了"

_reguess.style.display="inline-block";

}

//将结果存入div

_res.innerHTML=res;

}

//再来一次

function reguess(){

// 隐藏再来一次

_reguess.style.display='none';

//清空结果

_res.innerHTML="";

//清空表单

_num.value=""

//重新生成随机数

random=Math.ceil(Math.random()*10);

console.log(random);

}

</script>

</body>

</html>