通过jq写猜数字小游戏

最新推荐文章于 2022-11-04 20:46:01 发布

DZY_hungry

最新推荐文章于 2022-11-04 20:46:01 发布

阅读量299

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/DZY_hungry/article/details/107849898

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>猜数字</title>
		<script type="text/javascript" src="jquery.js"></script>
	</head>
	<body>
		<p>我刚才随机选定了一个100以内的自然数，看你能否在10次以内猜中它。
		每次我都会告诉你所猜的结果是高了还是低了。</p>
		<br />
		<label>请猜数：<input id="writeNumber" type="text" /><button type="submit" id="sure">确定</button></label>
		<br>
		<span>上次猜的数：</span>
		<div id="show0"style="display: none;">
			<p style="background-color: red;color: white;">你猜错了！</p>
			<p>刚才你猜高了！</p>
		</div>
		<div id="show1"style="display: none;">
			<p style="background-color: red;color: white;">你猜错了！</p>
			<p>刚才你猜低了！</p>
		</div>
		<div id="show2"style="display: none;">
			<p style="background-color: lawngreen;color: white;">恭喜你！猜对了！</p>
			<p><button type="reset" id="newGame">开始新游戏</button></p>
		</div>
		<div id="show3"style="display: none;">
			<p style="background-color: red;color: white;">!!!GAME OVER!!!</p>
			<p><button type="reset" id="newStart">开始新游戏</button></p>
		</div>
		<script>
			$(document).ready(function(){
			var number = parseInt(Math.random()*100);
			console.log(number);
			// for(let i = 0;i<9;i++){
				// var myNumber=new Array(10);
				// myNumber[i]= $('#writeNumber').val();	
			// }
			var flag = 0;
			$('#sure').click(function(){
				var writeNumber = $('#writeNumber').val();
				console.log(writeNumber);
				if($('#writeNumber').val().trim() == ''){
					$('span').append('0'+' ');
				}else{
					$('span').append(writeNumber+' ');
				}
				guessNumber(number,writeNumber);
				$('#writeNumber').val(' ');
				flag++;
				if(flag == 10){
					$('#writeNumber').attr('disabled', 'disabled');
					$('#sure').attr('disabled', 'disabled');
					$('#show1').css('display','none');
					$('#show2').css('display','none');
					$('#show0').css('display','none');
					$('#show3').css('display','block');
				}
			})
			$('#newGame').click(function(){
				window.location.reload();
			})
			$('#newStart').click(function(){
				window.location.reload();
			})
			})
			function guessNumber(number,writeNumber){
				if(writeNumber>number){
					$('#show1').css('display','none');
					$('#show2').css('display','none');
					$('#show0').css('display','block');
				}else if(writeNumber<number){
					$('#show2').css('display','none');
					$('#show0').css('display','none');
					$('#show1').css('display','block');
				}else{
					$('#show0').css('display','none');
					$('#show1').css('display','none');
					$('#show2').css('display','block');
					$('#writeNumber').attr('disabled', 'disabled');
					$('#sure').attr('disabled', 'disabled');
				}
			}
		</script>
	</body>
</html>

DZY_hungry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过jq写猜数字小游戏

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>猜数字</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <p>我刚才随机选定了一个100以内的自然数，看你能否在10次以内猜中
复制链接

扫一扫