html+css+javascript_猜数字游戏

最新推荐文章于 2022-03-06 13:47:20 发布

原创最新推荐文章于 2022-03-06 13:47:20 发布 · 1.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#猜数字游戏 #html+css+js第一个程序

本文详细介绍了一个基于HTML、CSS和JavaScript的简单数字猜测游戏，玩家需在8次内猜中系统随机生成的0到100之间的数字，游戏提供即时反馈并记录剩余猜测次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<style type="text/css">
			*{
			    margin: 0;
			    padding: 0;
			}
			
			.container{
				width: 100%;
				min-height: 600px;
				text-align: center;
			}
			.one{
				width: 100%;
				height: 180px;
				padding-top: 30px;
				background: linear-gradient(to right ,cyan,darkcyan);
			}
			
			.two{
				width: 100%;
				height: 240px;
				padding-top: 30px;
				background: linear-gradient(to right ,aquamarine,#00FF84);
			}
			#num_one{
				outline: none;/*去除input输入框外边的线条*/
				border-radius:20px 20px 20px 20px;
			}
			
			.three{
				width: 100%;
				height:210px;
				padding-top: 40px;
				background: linear-gradient(to right ,lime,mediumspringgreen);
			}
			input{
				width: 154px;
				height: 39px;
			}
			button{
				height: 36px;
				width: 75px;
				color: #FFFFFF;
				font-size: 15px;
				border-radius:10px 10px 10px 10px;
				background-color: darkslategray;
				outline:none;
			}
			#result{
				color:red;
			}
			.three p{
				font-size: 20px;
			}
			#right{
				color: #000000;
			}
		</style>
	<body>
		<div id="" class="container">
			
			<div class="one" >
				<h1>欢迎登录数字猜猜乐</h1><br>
				<p>
				        <b>规则介绍：</b><br>
				        <b style="font-weight: 600;color: #E00003;">系统随机生成一个0~100以内的数</b><br>
						<b> 请输入您猜的数，您共有8次机会</b><br>
				       
				       
				</p>
				
			</div>
			
			<div class="two">
				<h3>请在下面输入您决定的数字：</h3>
				<br>
				<form id="two_one">
					<input type="number" name="num_one"  id="num_one">
					<button type="button" id="submitbox" onclick="sub()">提交</button>
					<button type="button" id="submitbox" onclick="check()">查看</button>
				</form>
				<br />
				<br />
				<p>正确答案：<span id="right"></span></p>
			</div>
			
			<div class="three">
				<p>您输入的数：<span id="result"></span></p>
				<p><br />当前剩余次数为：<span id="coun"></span>次</p>
			</div>
		</div>
		
		<script>
			var randomNum = parseInt(Math.random()*100); 
			
			var count =0;
			document.getElementById("coun").innerHTML=8;
			function sub(){
			
				var num1 = document.getElementById("num_one");
				var num2= Number(num1.value);
				
				if(count<=8){//次数
					if(randomNum>num2){	
						count++;
						document.getElementById("result").innerHTML="偏小";
						document.getElementById("coun").innerHTML=8-count;
						
					}else if(randomNum<num2){
						count++;
						document.getElementById("result").innerHTML="偏大";
						document.getElementById("coun").innerHTML=8-count;
						
					}else {
						count++;
						document.getElementById("result").innerHTML="输入正确";	
						document.getElementById("coun").innerHTML=8-count;	
					}
					
				}else{
					alert("游戏结束，请重新开始");
				}
				
			}	
			function check(){
				document.getElementById("right").innerHTML=randomNum;	
			}

			
		</script>
	</body>
	
</html>