js猜数字小游戏

spy过家家

已于 2022-06-14 21:42:52 修改

阅读量273

点赞数 6

文章标签： javascript 前端 html

于 2022-06-14 20:53:42 首次发布

本文链接：https://blog.youkuaiyun.com/zm8454/article/details/125285943

版权

要求：

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

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="wrapper">

		</div>
		<input type="text" id="shuzi" value="" placeholder="请输入你所猜到的数字!">
		<button onclick="cai()">猜一猜</button>
		<button onclick="zlyc()" id="yc" style="display: none;">再来一次？</button>
		<script>
			var _wrapper = document.getElementById('wrapper');
			var _shuzi = document.getElementById('shuzi');
			var shu = parseInt(Math.random() * 100);
			var _yc = document.getElementById("yc");
			console.log(shu);

			function cai() {

				if (_shuzi.value == shu) {
					_wrapper.innerHTML = "恭喜你猜对了！";
					_yc.style.display = "block";
				}
				if (_shuzi.value > shu) {
					_wrapper.innerHTML = "猜大了！";
				}
				if (_shuzi.value < shu && _shuzi.value != "") {
					_wrapper.innerHTML = "猜小了！";
				}
			}

			function zlyc() {
				_wrapper.innerHTML = "";
				_shuzi.value = "";
				shu = parseInt(Math.random() * 100);
				console.log(shu);
				cai();
				_yc.style.display = "none";
			}
		</script>
	</body>
</html>

效果图：