我的开心小农场

最新推荐文章于 2022-04-10 22:47:31 发布

laity01

最新推荐文章于 2022-04-10 22:47:31 发布

阅读量150

点赞数

分类专栏：练习文章标签： js jquery

本文链接：https://blog.csdn.net/m0_57675124/article/details/118187390

版权

练习专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#farm{
				width: 467px;
				height: 278px;
				position: absolute;
				left: 40%;
				top: 20px;
				background-color: aqua;
			}
			#show{
				position: absolute;
				left: 40%;
				top: 28%;
			}
			#option{
				width: 480px;
				height: 60px;
				position: absolute;
				left: 5%;
				top: 79%;
			}
			#option>img{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div id='farm'>
			<div id="show"></div>
			<img src="img/plowland.jpg"style="float: left;" />
			
			<div id="option">
				<img src="img/btn_seed.png" id="option01" />
				<img src="img/btn_grow.png" id="option02" />
				<img src="img/btn_bloom.png" id="option03" />
				<img src="img/btn_fruit.png" id="option04" />
				<img src="img/btn_harvest.png" id="option05" />
			</div>
		</div>
		
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/jquery.pngFix.js"></script>
		
		<script>
			$(function(){
				var conut=0;
				$('#option01').click(function(){
					if(conut>=1){
						return false;
					}
					$('#show').append('<img src="img/seed.png" />')
					conut++;
				});
				
				$('#option02').click(function(){
					if(conut>=2){
						return false;
					}
					$('#show').html('<img src="img/grow.png" />')
					conut++;
				});
				
				$('#option03').click(function(){
					if(conut>=3){
						return false;
					}
					$('#show').html('<img src="img/bloom.png" />')
					conut++;
				});
				
				$('#option04').click(function(){
					if(conut>=4){
						return false;
					}
					$('#show').html('<img src="img/fruit.png" />')
					conut++;
				});
				
				$('#option05').click(function(){
					if(conut>=5){
						return false;
					}
					$('#show').remove();
					alert('收获成功')
					conut++;
				});
			});
		</script>
	</body>
</html>

laity01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
我的开心小农场

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #farm{ width: 467px; height: 278px; position: absolute; left: 40%; .
复制链接

扫一扫