24大数据技术6.5实验课作业

注意

本次作业包含3个页面，请注意对应文件名，注意更改文件名和移动文件位置
点击代码块，可使用方向键左右移动查看代码
代码块右上角可以最小化代码
注释部分不需要敲
提交3个运行后截图，城市的搜索实现、租金的搜索实现和关键字的搜索实现

1.index.html,注意把版权处改为自己的名字，完成后提交第一题的代码截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好房之家 - 租房信息列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body>

<header class="top-bar">
    <div class="container">
        <div class="logo">好房之家</div>
        <nav class="main-nav">
            <a href="#" class="active">首页</a>
            <a href="#">区域找房</a>
            <a href="#">我的收藏</a>
            <a href="#">关于我们</a>
        </nav>
    </div>
</header>

<section class="banner">
    <div class="container">
        <h1>找一找属于你的小窝</h1>
        <p>覆盖全城真实房源，拎包即可入住</p>
    </div>
</section>

<section class="search-bar">
    <div class="container">
        <div class="search-form">
            <div class="form-item">
                <label>城市</label>
                <select id="city">
                    <option value="all">全部</option>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="gz">广州</option>
                    <option value="sz">深圳</option>
                </select>
            </div>
            <div class="form-item">
                <label>租金</label>
                <select id="price">
                    <option value="all">不限</option>
                    <option value="0-2000">2000 以下</option>
                    <option value="2000-4000">2000 - 4000</option>
                    <option value="4000-6000">4000 - 6000</option>
                    <option value="6000-99999">6000 以上</option>
                </select>
            </div>
            <div class="form-item flex-grow">
                <label>关键字</label>
                <input type="text" id="keyword" placeholder="输入小区名/商圈，如：望京">
            </div>
            <button id="search-btn" class="btn-search">搜索房源</button>
        </div>
    </div>
</section>

<section class="house-section">
    <div class="container">
        <div class="section-title">
            <h2>推荐房源</h2>
            <span class="result-count">共 <em id="count">0</em> 套</span>
        </div>
        <div id="house-list" class="house-list">
        </div>
        <p id="no-data" class="no-data" style="display:none;">暂无符合条件的房源</p>
    </div>
</section>

<footer class="footer">
    <div class="container">
        <p>© 2026 Python Web复习项目  |  （你的名字）</p>
    </div>
</footer>

<div id="modal" class="modal-mask" style="display:none;">
    <div class="modal-box">
        <span class="modal-close" id="modal-close">&times;</span>
        <img id="m-img" src="" alt="">
        <h3 id="m-title"></h3>
        <p class="m-price">￥<em id="m-price"></em><span>/月</span></p>
        <ul class="m-info">
            <li>面积：<span id="m-area"></span> ㎡</li>
            <li>户型：<span id="m-layout"></span></li>
            <li>楼层：<span id="m-floor"></span></li>
            <li>位置：<span id="m-address"></span></li>
        </ul>
        <p class="m-desc" id="m-desc"></p>
    </div>
</div>

<script src="js/main.js"></script>
</body>
</html>


2.创建css文件夹，编辑文件style.css，提交第二题部分代码截图即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    color: #333;
    background: #f5f5f5;
    line-height: 1.6;
}

a { text-decoration: none; color: #333; }
ul { list-style: none; }
em { font-style: normal; }

.container {
    width: 1200px;
    margin: 0 auto;
}

.top-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 70px;
    line-height: 70px;
}

.top-bar .logo {
    float: left;
    font-size: 24px;
    font-weight: bold;
    color: #ff6a3d;
}

.main-nav {
    float: right;
}

.main-nav a {
    margin-left: 30px;
    color: #555;
    font-size: 16px;
}

.main-nav a:hover,
.main-nav a.active {
    color: #ff6a3d;
}

.banner {
    height: 280px;
    background: linear-gradient(120deg, #ff8a5b, #ff5252);
    color: #fff;
    text-align: center;
    padding-top: 90px;
}

.banner h1 {
    font-size: 42px;
    margin-bottom: 12px;
}

.banner p {
    font-size: 18px;
    opacity: 0.9;
}

.search-bar {
    background: #fff;
    padding: 25px 0;
    margin-top: -40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.search-form {
    display: flex;
    align-items: center;
}

.form-item {
    margin-right: 15px;
}

.form-item.flex-grow {
    flex: 1;
}

.form-item label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.form-item select,
.form-item input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}

.form-item select { width: 140px; }
.form-item input  { width: 100%; }

.btn-search {
    height: 38px;
    padding: 0 28px;
    background: #ff6a3d;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 18px;
}

.btn-search:hover {
    background: #ff5252;
}

.house-section {
    padding: 40px 0;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-left: 4px solid #ff6a3d;
    padding-left: 12px;
}

.section-title h2 {
    font-size: 22px;
}

.result-count em {
    color: #ff6a3d;
    font-size: 18px;
    font-weight: bold;
    margin: 0 4px;
}

.house-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.house-card {
    width: 285px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.25s;
    position: relative;
}

.house-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.house-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.house-info {
    padding: 12px 14px;
}

.house-info h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.house-info .price {
    color: #ff6a3d;
    font-size: 20px;
    font-weight: bold;
}

.house-info .price span {
    font-size: 12px;
    font-weight: normal;
}

.house-tag {
    margin-top: 8px;
    font-size: 12px;
    color: #888;
}

.house-tag span {
    margin-right: 10px;
}

.house-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #eee;
    padding: 10px 14px;
    font-size: 13px;
}

.btn-detail {
    color: #ff6a3d;
    cursor: pointer;
}

.btn-like {
    cursor: pointer;
    color: #999;
}

.btn-like.liked {
    color: #ff5252;
}

.no-data {
    text-align: center;
    color: #999;
    padding: 60px 0;
    font-size: 16px;
}

.footer {
    background: #2b2b2b;
    color: #aaa;
    text-align: center;
    padding: 25px 0;
    margin-top: 40px;
    font-size: 13px;
}

.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-box {
    background: #fff;
    width: 520px;
    border-radius: 8px;
    padding: 22px;
    position: relative;
    animation: zoomIn 0.25s;
}

@keyframes zoomIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 8px;
    font-size: 26px;
    cursor: pointer;
    color: #999;
}

.modal-close:hover { color: #333; }

.modal-box img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 4px;
}

.modal-box h3 {
    margin: 14px 0 6px;
    font-size: 20px;
}

.m-price {
    color: #ff6a3d;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 14px;
}

.m-price span { font-size: 13px; font-weight: normal; }

.m-info {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.m-info li {
    width: 50%;
    margin-bottom: 6px;
}

.m-info li span {
    color: #333;
    font-weight: bold;
}

.m-desc {
    font-size: 14px;
    color: #666;
    border-top: 1px dashed #eee;
    padding-top: 10px;
    margin-top: 6px;
}

3.js目录下，main.js文件 此题要完成三种不同的搜索功能，房屋信息取重点即可，完成后在网页打开，实现并提交三个不同的搜索后截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
var houseData = [
    {
        id: 1, city: 'bj', title: '望京 SOHO 精装两居', price: 5800, area: 78,
        layout: '2室1厅', floor: '12/22层', address: '北京-朝阳-望京',
        img: 'https://picsum.photos/seed/h1/400/260',
        desc: '南北通透，家电齐全，地铁 14 号线望京站步行 5 分钟，拎包入住。'
    },
    {
        id: 2, city: 'bj', title: '中关村主卧出租', price: 3200, area: 22,
        layout: '4室1厅-主卧', floor: '6/18层', address: '北京-海淀-中关村',
        img: 'https://picsum.photos/seed/h2/400/260',
        desc: '独立主卧带阳台，限女生，楼下是地铁 10 号线和多所高校，配套齐全。'
    },
    {
        id: 3, city: 'sh', title: '陆家嘴江景一居', price: 8800, area: 55,
        layout: '1室1厅', floor: '28/32层', address: '上海-浦东-陆家嘴',
        img: 'https://picsum.photos/seed/h3/400/260',
        desc: '270° 全景落地窗，俯瞰黄浦江夜景，地铁 2 号线直达。'
    },
    {
        id: 4, city: 'sh', title: '徐家汇温馨两居', price: 6500, area: 70,
        layout: '2室1厅', floor: '5/12层', address: '上海-徐汇-徐家汇',
        img: 'https://picsum.photos/seed/h4/400/260',
        desc: '精装修南北通透，近徐家汇商圈，生活交通便利，适合家庭入住。'
    },
    
];

var liked = {};

function render(list) {
    var $list = $('#house-list');
    $list.empty();
    $('#count').text(list.length);

    if (list.length === 0) {
        $('#no-data').show();
        return;
    }
    $('#no-data').hide();

    $.each(list, function (i, h) {
        var isLiked = liked[h.id] ? 'liked' : '';
        var heart = liked[h.id] ? '♥' : '♡';
        var html = ''
            + '<div class="house-card" data-id="' + h.id + '">'
            +   '<img src="' + h.img + '" alt="">'
            +   '<div class="house-info">'
            +       '<h3>' + h.title + '</h3>'
            +       '<p class="price">￥' + h.price + '<span>/月</span></p>'
            +       '<p class="house-tag">'
            +           '<span>' + h.layout + '</span>'
            +           '<span>' + h.area + ' ㎡</span>'
            +           '<span>' + h.address + '</span>'
            +       '</p>'
            +   '</div>'
            +   '<div class="house-actions">'
            +       '<span class="btn-detail" data-id="' + h.id + '">查看详情</span>'
            +       '<span class="btn-like ' + isLiked + '" data-id="' + h.id + '">'
            +           heart + ' 收藏'
            +       '</span>'
            +   '</div>'
            + '</div>';
        $list.append(html);
    });
}

function filterData() {
    var city = $('#city').val();
    var priceRange = $('#price').val();
    var kw = $('#keyword').val().trim();

    var result = houseData.filter(function (h) {
        if (city !== 'all' && h.city !== city) return false;
        var parts = priceRange.split('-');
        var lo = parseInt(parts[0], 10);
        var hi = parseInt(parts[1], 10);
        if (priceRange !== 'all' && (h.price < lo || h.price > hi)) return false;
        if (kw && (h.title.indexOf(kw) === -1 && h.address.indexOf(kw) === -1)) return false;
        return true;
    });
    render(result);
}

function openModal(id) {
    var h = null;
    $.each(houseData, function (i, item) {
        if (item.id === id) { h = item; return false; }
    });
    if (!h) return;
    $('#m-img').attr('src', h.img);
    $('#m-title').text(h.title);
    $('#m-price').text(h.price);
    $('#m-area').text(h.area);
    $('#m-layout').text(h.layout);
    $('#m-floor').text(h.floor);
    $('#m-address').text(h.address);
    $('#m-desc').text(h.desc);
    $('#modal').fadeIn(200);
}

function closeModal() {
    $('#modal').fadeOut(200);
}

$(function () {
    render(houseData);

    $('#search-btn').on('click', filterData);

    $('#keyword').on('keyup', function (e) {
        if (e.keyCode === 13) filterData();
    });

    $('#house-list').on('click', '.btn-detail', function () {
        openModal(parseInt($(this).attr('data-id'), 10));
    });

    $('#house-list').on('click', '.btn-like', function () {
        var id = parseInt($(this).attr('data-id'), 10);
        if (liked[id]) {
            delete liked[id];
            $(this).removeClass('liked').text('♡ 收藏');
        } else {
            liked[id] = true;
            $(this).addClass('liked').text('♥ 收藏');
        }
    });

    $('#modal-close').on('click', closeModal);

    $('#modal').on('click', function (e) {
        if (e.target === this) closeModal();
    });
});