猜一猜小游戏的简单写法适合初学者学习

一名不知名程序员

已于 2022-08-02 22:11:14 修改

阅读量139

点赞数

分类专栏： javascript 大前端文章标签： javascript 前端 servlet

于 2022-08-02 22:00:09 首次发布

本文链接：https://blog.csdn.net/why0925123/article/details/126131154

版权

JavaScript 随机数猜谜游戏前端开发交互设计

关键词由CSDN通过智能技术生成

大前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="res"></div>
		<input type="text" id="num">
		<button id="guess">猜一猜</button>
		<button id="reguess">再来一次</button>
		<script>
			var random = Math.floor(Math.random() * 20); //第一次生成随机数
			console.log(random);
			var _guess = document.querySelector("#guess");  //猜一猜按钮
			var _reguess = document.querySelector("#reguess"); //再来一次
			var _res = document.querySelector("#res"); //猜的结果
			var _num = document.querySelector("#num");  //用户输入框
			_reguess.style.display="none";  //默认再来一次隐藏
			//点击猜一猜的操作
			_guess.onclick = function() {   
				var num = _num.value; //获取用户输入数据
				//比较
				if (num > random) {
					_res.innerHTML = "猜大了"
				}
				if (num < random) {
					_res.innerHTML = "猜小了"
				}
				//猜对，再来一次显示
				if (num == random) {
					_res.innerHTML = "猜对了"
					_reguess.style.display="block";
				}
			}
			
			//点击再来一次的操作
			_reguess.onclick=function(){
				// 再来一次显示
				_res.innerHTML="";
				_num.value="";
				_reguess.style.display="none";
				// 重新生成随机数
				random = Math.floor(Math.random() * 20);
				console.log(random);
			}
		</script>
	</body>
</html>