js做简易开心农场`

Clear丶

于 2020-06-28 19:16:13 发布

阅读量821

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qq_41937228/article/details/107006153

版权

这篇博客介绍了如何利用JavaScript创建一个简单的开心农场应用。通过HTML布局，CSS美化，以及JavaScript实现互动功能，博主展示了从无到有构建这个小游戏的过程。

摘要由CSDN通过智能技术生成

简单的开心农场，简单实现
在这里插入图片描述
css:

body {
   
    margin:0;
    font-size:12px;
}

/*背景图片的位置*/
.main{
   
    width:1024px;
    height:768px;
    background-image:url(../img/1_100804231616_12.jpg);
}

.table_jz{
   
    width:820px;
    height:300px;
    margin:0 auto;
    padding-top:320px;
    margin-left:220px;
}

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>qq农场</title>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="main">
    <div class="table_jz">
        <table>
            <tr>
                <td><img src="img/none.png" id="1" onclick="changePic(this.id)"/></td>
                <td><img src="img/none.png" id="2" onclick="changePic(this.id)"/></td>
                <td><img src="img/none.png" id="3" onclick="changePic(this.id)"/></td>
                <td><img src="img/none.png" id="4" onclick="changePic(this.id)"/

最低0.47元/天解锁文章

Clear丶

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
js做简易开心农场`

简单的开心农场，简单实现css:body { margin:0; font-size:12px;}/*背景图片的位置*/.main{ width:1024px; height:768px; background-image:url(../img/1_100804231616_12.jpg);}.table_jz{ width:820px; height:300px; margin:0 auto; padding-to
复制链接

扫一扫