Skip to content

Commit 3f2a39d

Browse files
janilyjanily
committed
电影选座
1 parent 039ec42 commit 3f2a39d

File tree

6 files changed

+2215
-0
lines changed

6 files changed

+2215
-0
lines changed

‎js-mini-project/movie-seat-booking/CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# 1.0.0 (2020-05-24)
2+
3+
4+
### Features
5+
6+
* js 数组循环方法 ([52d6758](https://github.com/janily/fullstack-practice/commit/52d6758cb23b5e5a5777de8a27a4186728e82dfb))
7+
* react cms excise ([43b3356](https://github.com/janily/fullstack-practice/commit/43b33561f4d0ebfe86117e31ac2d7289647322ff))
8+
* 主页头部UI样式 ([a45bb50](https://github.com/janily/fullstack-practice/commit/a45bb50d62afe913abd9b97aa3f895eb59ed698d))
9+
* 主页添加动效 ([2e576fa](https://github.com/janily/fullstack-practice/commit/2e576faea6057065d3f63d011b52eb0c7ce6abd4))
10+
* 卡片组件封装 ([ef8be97](https://github.com/janily/fullstack-practice/commit/ef8be976a7d68d744dc3bc3b6d30af87ed13c728))
11+
12+
13+

‎js-mini-project/movie-seat-booking/app.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const container = document.querySelector('.container');
2+
const seats = document.querySelectorAll('.row .seat:not(.occupied)');
3+
const count = document.getElementById('count');
4+
const total = document.getElementById('total');
5+
const movieSelect = document.getElementById('movie');
6+
7+
let ticketPrice = +movieSelect.value;
8+
9+
function updateSelectedCount() {
10+
const selectedSeats = document.querySelectorAll('.row .seat.selected');
11+
12+
// console.log(selectedSeats);
13+
14+
// 定义座位数组
15+
const seatsIndex = [...selectedSeats].map((seat) => {
16+
return [...seats].indexOf(seat)
17+
})
18+
19+
localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex))
20+
21+
22+
23+
const selectedSeatsCount = selectedSeats.length;
24+
25+
console.log(selectedSeatsCount);
26+
27+
count.innerText = selectedSeatsCount;
28+
total.innerText = selectedSeatsCount * ticketPrice;
29+
}
30+
31+
// 更新座位选择信息
32+
movieSelect.addEventListener('change', e => {
33+
ticketPrice = e.target.value
34+
updateSelectedCount();
35+
})
36+
37+
// 座位选择
38+
container.addEventListener('click', (e) => {
39+
// console.log(e.target);
40+
if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')) {
41+
console.log(e.target);
42+
e.target.classList.toggle('selected');
43+
44+
updateSelectedCount();
45+
}
46+
})

‎js-mini-project/movie-seat-booking/index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="./style.css" />
8+
</head>
9+
<body>
10+
<div class="movie-container">
11+
<label for="">Pick a movie:</label>
12+
<select name="" id="movie">
13+
<option value="10">终结者</option>
14+
<option value="12">异形</option>
15+
<option value="8">精武门</option>
16+
<option value="9">普罗米修斯</option>
17+
</select>
18+
</div>
19+
<ul class="showcase">
20+
<li>
21+
<div class="seat"></div>
22+
<small>N/A</small>
23+
</li>
24+
<li>
25+
<div class="seat selected"></div>
26+
<small>Selected</small>
27+
</li>
28+
<li>
29+
<div class="seat occupied"></div>
30+
<small>Occupied</small>
31+
</li>
32+
</ul>
33+
34+
<div class="container">
35+
<div class="screen"></div>
36+
<div class="row">
37+
<div class="seat"></div>
38+
<div class="seat"></div>
39+
<div class="seat occupied"></div>
40+
<div class="seat occupied"></div>
41+
<div class="seat"></div>
42+
<div class="seat"></div>
43+
<div class="seat"></div>
44+
</div>
45+
<div class="row">
46+
<div class="seat"></div>
47+
<div class="seat"></div>
48+
<div class="seat"></div>
49+
<div class="seat occupied"></div>
50+
<div class="seat occupied"></div>
51+
<div class="seat"></div>
52+
<div class="seat"></div>
53+
</div>
54+
<div class="row">
55+
<div class="seat"></div>
56+
<div class="seat"></div>
57+
<div class="seat occupied"></div>
58+
<div class="seat occupied"></div>
59+
<div class="seat"></div>
60+
<div class="seat"></div>
61+
<div class="seat"></div>
62+
</div>
63+
<div class="row">
64+
<div class="seat"></div>
65+
<div class="seat"></div>
66+
<div class="seat occupied"></div>
67+
<div class="seat occupied"></div>
68+
<div class="seat occupied"></div>
69+
<div class="seat"></div>
70+
<div class="seat"></div>
71+
</div>
72+
<div class="row">
73+
<div class="seat"></div>
74+
<div class="seat"></div>
75+
<div class="seat occupied"></div>
76+
<div class="seat occupied"></div>
77+
<div class="seat occupied"></div>
78+
<div class="seat"></div>
79+
<div class="seat"></div>
80+
</div>
81+
</div>
82+
83+
<p class="text">
84+
你选择了 <span id="count">0</span> seats for a price of $
85+
<span id="total">0</span>
86+
</p>
87+
<script src="./app.js"></script>
88+
</body>
89+
</html>

0 commit comments

Comments
 (0)