js 猜数字游戏

最新推荐文章于 2024-01-27 21:56:08 发布

可劲旋代码

最新推荐文章于 2024-01-27 21:56:08 发布

阅读量255

点赞数 1

文章标签：前端开发语言 html ecmascript javascript

本文链接：https://blog.csdn.net/jiao18237330105/article/details/126118613

版权

JavaScript 猜数字游戏随机数用户交互事件监听

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

<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>