javascript实现猜大小小游戏

ZJTT

已于 2022-06-14 21:53:24 修改

阅读量951

点赞数 6

分类专栏： js 文章标签： javascript

于 2022-06-14 21:39:56 首次发布

本文链接：https://blog.csdn.net/dz1999/article/details/125286594

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个使用JavaScript编写的简单猜数字游戏。用户输入猜测的数字，系统会与随机生成的数字进行比较并给出提示。如果猜对，会出现一个按钮让用户选择是否继续游戏。点击按钮后，之前的输入和结果显示将被重置。

摘要由CSDN通过智能技术生成

要求：

在输入框中输入你猜的数字，
然后会和系统里随机的数字进行比较返回比较结果，
如果你手动输入的数字比随机的数字大，
会在页面里输出“猜大了”,若比随机数字小，会在页面里输出"猜小了"，
否则，就是"猜对了"，会出现对应提醒。如果猜对的话，会出现之前隐藏的一个按钮，
提醒你是否继续游戏，点击代表继续游戏，小按钮也会消失

一、代码如下：

要点：js样式效果需要加双引号

猜一猜需要一个函数

来判断输入值得大小，大了提示猜大了，小了提示猜小了，对了提示猜对了

再猜一次需要一个函数

这个来重置前面所输入的值和判断结果并且隐藏再猜一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#third{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="first"></div>
		<input id="second" type="text" value="" placeholder="请输入你所猜的数字">
		<button onclick="add(this)">猜一猜</button>
		<button id="third"  onclick="res(this)">再猜一次？</button>
		<script>
			var _first=document.getElementById("first");
			var _second=document.getElementById("second");
			var _third=document.getElementById("third");
			function val(){
				a=Math.floor(Math.random()*20+10);
				return a;
			}
			console.log(val());
			function add(tag){
				if(_second.value>a){
					_first.innerText="猜大了";
				}
				else if(_second.value<a&&_second.value!=""){
					_first.innerText="猜小了";
				}else if(_second.value!=""){
					_first.innerText="恭喜你，猜对了";
					_third.style.display="inline-block";
				}
			}
			function res(acg){
				_second.value="";
				_first.innerText="";
				val();
				console.log(a);
				_third.style.display="none";
			}
		</script>
	</body>
</html>

二、效果图：

在输入框中输入你猜的数字，
然后会和系统里随机的数字进行比较返回比较结果，
如果你手动输入的数字比随机的数字大，
会在页面里输出“猜大了”,若比随机数字小，会在页面里输出"猜小了"，
否则，就是"猜对了"，会出现对应提醒。如果猜对的话，会出现之前隐藏的一个按钮，
提醒你是否继续游戏，点击代表继续游戏，小按钮也会消失

ZJTT

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript实现猜大小小游戏

在输入框中输入你猜的数字，然后会和系统里随机的数字进行比较返回比较结果，如果你手动输入的数字比随机的数字大，会在页面里输出“猜大了”,若比随机数字小，会在页面里输出"猜小了"，否则，就是"猜对了"，会出现对应提醒。如果猜对的话，会出现之前隐藏的一个按钮，提醒你是否继续游戏，点击代表继续游戏，小按钮也会消失。............
复制链接

扫一扫

专栏目录