用js制作开心农场的制作

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_45747484/article/details/102740730

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yRVUN9kW-1571977591648)(https://img-blog.csdnimg.c在这里插入代码片n/20191025122616554.gif)]

    <style type="text/css">
        div{
            font-size:12px;
            border:#999 1px solid;
            padding:5px;
        }
        #bg{		/*控制页面背景*/
            width:456px;
            height:266px;
            background-image:url(formPhoto/plowland.jpg);
        }
        img{		/*控制图片*/
            position:absolute;
            top:85px;
            left:195px;
        }
        #seed{		/*控制播种按钮*/
            background-image:url(formPhoto/btn_seed.png);
            width:56px;
            height:56px;
            position:absolute;
            top:229px;
            left:49px;
            cursor:hand;
        }
        #grow{		/*控制生长按钮*/
            background-image:url(formPhoto/btn_grow.png);
            width:56px;
            height:56px;
            position:absolute;
            top:229px;
            left:154px;
            cursor:hand;
        }
        #bloom{		/*控制开花按钮*/
            background-image:url(formPhoto/btn_bloom.png);
            width:56px;
            height:56px;
            position:absolute;
            top:229px;
            left:259px;
            cursor:hand;
        }
        #fruit{		/*控制结果按钮*/
            background-image:url(formPhoto/btn_fruit.png);
            width:56px;
            height:56px;
            position:absolute;
            top:229px;
            left:368px;
            cursor:hand;
        }
    </style>

<script type="text/javascript">
    $(document).ready(function(){
       $("#seed").on("click",function(){
         $("img").remove();             //绑定播种按钮的单击事件
           $("#bg").prepend("<img src='formPhoto/seed.png'/>")            //移除img元素
       });
        $("#grow").on("click",function(){
            $("img").remove();             //绑定播种按钮的单击事件
            $("#bg").prepend("<img src='formPhoto/grow.png'/>")            //移除img元素
        });

        $("#bloom").on("click",function(){
            $("img").remove();             //绑定播种按钮的单击事件
            $("#bg").prepend("<img src='formPhoto/bloom.png'/>")            //移除img元素
        });
        $("#fruit").on("click",function(){                //绑定结果按钮的单击事件
           $("<img src='formPhoto/fruit.png'/>").replaceAll("img");
        });

    });
</script>
<div id="bg">
    <span id="seed"></span>
    <span id="grow"></span>
    <span id="bloom"></span>
    <span id="fruit"></span>
</div>