HTML+JS猜数字游戏

最新推荐文章于 2024-05-18 12:37:22 发布

鱼鱼鱼。

最新推荐文章于 2024-05-18 12:37:22 发布

阅读量8k

点赞数 6

本文链接：https://blog.csdn.net/qq_45176519/article/details/99688592

版权

完成可交互的猜数字游戏。

当用户输入一个数字后，可以根据与系统生成的数字比较结果反馈给用户，大了，小了，或者猜对了。
1）输入数值比较后给出与系统数字的表结果。
2）猜中时弹出一个对话框，提示猜对了。
3）可查看正确数字。
在这里插入图片描述
查看正确数字
代码如下

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body {
			font-size: 80%;
			font-family: "微软雅黑"courier monospace;
			letter-spacing: 0.2em;
			background-color: #efefef;
		}

		#page {
			max-width: 950px;

			height: 400px;
			margin: 10px auto 10px auto;
			padding: 20px;
			border: 4px double #000000;
			background-color: pink;
			box-shadow: 10px;
			border-radius: 20px;
		}

		#title {
			width: 200px;
			margin: 5px auto 10px auto;
			font-size: 25px;
			text-align: center;

		}

		#submit {
			text-align: center;

			padding-top: 150px;

		}

		#footer {
			padding-top: 10px;
			text-align: center;
		}



		#suu {
			width: 100px;
			height: 100px;
			background-color: gray;
			box-shadow: 3px;
		}

		#curent {

			width: 100px;
			height: 50px;
			background-color: gray;
			box-shadow: 3px;
			margin: 20px;
		}
	</style>
</head>


<body>
	<div id="page">
		<div id="title">
			<p>欢迎来到</p>
			<p>数字猜猜乐</p>
		</div>


		<div id="random">

			<div id="suu">

			</div>
			<div id="curent">

			</div>
		</div>
		<div id="submit">
			<form action="#" method="get">
				Number Guessed：
				<input type="text" id="guessNum" name="guessNum" />
				<input type="button" id="guess" name="guess" onclick="checknum()" value="提交" />
				<input type="button" id="cur" name="cur" onclick="curNum()" value="查看" />
			</form>
		</div>



		<div id="footer">
			<p>游戏规则：猜数字，数字范围[0,100)</p>
		</div>


	</div>

</body>
<script>
	var ran = parseInt(Math.random() * 100);

	function checknum() {

		var s1 = parseInt(document.getElementById("guessNum"));
		if (s1 > ran) {

			document.getElementById("suu").innerHTML = "大了！";
		} else if (s1 < ran) {

			document.getElementById("suu").innerHTML = "小了";

		} else {
			document.getElementById("suu").innerHTML = "正确";
		}
	}

	function curNum() {
		document.getElementById("curent").innerHTML = ran;
	}
</script>

</html>

鱼鱼鱼。

关注

6
点赞
踩
36

收藏

觉得还不错? 一键收藏
1
评论
HTML+JS猜数字游戏

完成可交互的猜数字游戏。当用户输入一个数字后，可以根据与系统生成的数字比较结果反馈给用户，大了，小了，或者猜对了。1）输入数值比较后给出与系统数字的表结果。2）猜中时弹出一个对话框，提示猜对了。查看正确数字代码如下<!DOCTYPE html><html><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫