通过html实现随机数小游戏

最新推荐文章于 2023-05-05 17:05:18 发布

林深时见鹿.

最新推荐文章于 2023-05-05 17:05:18 发布

阅读量719

点赞数 1

分类专栏：初学文章标签： html js css jquery

本文链接：https://blog.csdn.net/weixin_45436168/article/details/119810923

版权

初学专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过html实现java中的随机数猜测小游戏
下文演示
思路:

构造前端页面:
①主容器包裹三个p标签+一个button标签
②实现对按钮的hover效果
③通过js对页面获取写入内容
js思路:
①按钮绑定提交函数{
函数包含对输入框内容的提取
对所猜测内容的innerhtml写入
对生命条数的判定，并在适当时候给与用户提示
}
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		a{
			display: none;
		}
		#container{
			width: 200px;
			height: 120px;
			background-color: pink;
			margin:100px auto;
		}
		#num2{
			border: none;
			width: 195px;
			height: 30px;
			background-color: antiquewhite;
			color: red;
			margin: 10px auto;
		}
		#button{
			display: block;
			width: 3.125rem;
			margin: auto;
			border: none;
			background-color: beige;
		}
		#button:hover{
			
			background-color: red;
			transition: 2s;
		}
		#input p:nth-child(1){
			width: 50px;
			display: inline-block;
			color: cyan;
			opacity: 0.5;
		}
		#input p:nth-child(2){
			width: 50px;
			display: inline-block;
			color: cyan;
			opacity: 0.5;
		}
	</style>
	<body>
		
		<div id="container">
			<input type="text" id="num2" placeholder="请输入你猜测的数字" />
			<a id="hr">吃一个老八蜜汁小汉堡</a>
		<button type="button" id="button">Try</button>
		<span id="input">
			当前输入:
			<p></p>
		
		</span>
		</div>
		
		
	</body>
</html>

<script type="text/javascript">
	function random(min,max){
		return parseInt(Math.random()*(max-min)+min);
	}
	let num1 = random(1,100);
	let numbers = 6;
	$("#button").click(function(){
		let num2 = $("#num2").val();
		$("#input p").html(num2)
		console.log(num1,num2);
		if(num1 < num2){
			alert("你输入的数字过大");
			alert("剩余次数:"+numbers);
			numbers -=1;
		}
		else if(num1 > num2){
			alert("你输入的数字过小");
			alert("剩余次数:"+numbers);
			numbers -=1;
		}
		if(numbers == 0){
			$("#input p:nth-child(2)").html(num1)
			alert("即将刷新")
			window.location.reload("index.html");
		}
		if(numbers == 3){
			$("a").css({
				"display":"block",
				"color":"black",
				"fontSize":12
			})
		}
		$("#hr").click(function(){
			numbers= 6;
			alert("当前生命为"+numbers)
		})
	})
	
	
</script>

在线查看

林深时见鹿.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
通过html实现随机数小游戏

通过html实现java中的随机数猜测小游戏下文演示思路:构造前端页面:①主容器包裹三个p标签+一个button标签②实现对按钮的hover效果③通过js对页面获取写入内容js思路:①按钮绑定提交函数{函数包含对输入框内容的提取对所猜测内容的innerhtml写入对生命条数的判定，并在适当时候给与用户提示}代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /&
复制链接

扫一扫