前端小项目（一）| 电影院座位预定

前言

开始好好学习前端啦。学紫色爱心记录一波！！

初步学了html，css，js，在github上找了几个前端小项目模仿着练练手。第一个就是电影院座位预定页面，主要的功能是：选择看哪部电影、选择座位、自动生成价格。

完整代码放在https://github.com/titibabybaby/FED/tree/main/movie%20seat%20booking 学习github上大佬bradtraversy的demo，感谢~

效果长这样~

1.html

html代码主要是搭建整体框架、结构：

movie-container ：可以选择的电影|movie
showcase ：展示屏幕+三种座位类型|seat、seat seatshow、seat occupied
seat-container：座位部分，6行8列|row|seat/seat occupied
text：显示选择的个数和总价格|num、price

<div class="movie-container"><label>pick a movie : </label><select id="movie"><option value="32">头文字D（￥32）</option><option value="38">想见你（￥38）</option><option value="35">禁闭岛（￥35）</option><option value="30">阳光姐妹淘（￥30）</option></select></div><ul class="showcase"><li><div class="seat"></div><small>Avaliable</small></li><li><div class="seat seatshow"></div><small>Selected</small></li><li><div class="seat occupied"></div><small>Occupied</small></li></ul>

座位部分放一点~重复就ok

<div class="seat-container"><div class="screen"></div><div class="row"><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat occupied"></div><div class="seat"></div><div class="seat"></div><div class="seat occupied"></div><div class="seat"></div></div>

<div class="text"><p>You have selected <span id=num>num</span>seats for a price of <span id="price">price</span></p></div>

2. CSS

主要是设计丰富html元素的样式：

对class类，css用 .
对id属性的，css用 #

Note：

body、movie-container、showcase、row、li…都用的弹性布局：
display: flex;
justify-content：
align-items：

接下来贴我觉得重要的代码~

body{background-color:darkslategray;font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.movie-container{display: flex;justify-content: center; /*弹性容器属性*/align-items: center; /*弹性布局容器属性*/width: 800px;height: auto;margin: 100px auto 0 auto;
}

.showcase{background-color:olive;border-radius: 3px;display: flex;justify-content: space-between;list-style-type: none;width: 300px;margin: 30px auto;padding: 5px 10px;
}
.showcase li{color:lightgray;display: flex;align-items: center;justify-content: center;margin: 0 10px;
}

关于.screen，屏幕的设计：首先先画一个矩形，然后用transform让它沿x轴旋转，注意还要在其父元素seat-container上调整视角距离perspective，调近一些。才会看起来明显是一个梯形，像电影屏幕~

.screen{margin:5px auto 20px auto;width: 250px;height: 60px;transform:rotateX(-28deg);background-color: snow;box-shadow: 0 3px 10px rgba(250, 246, 246, 0.7); /*0.7是不透明度*/
}

关于seat，首先画一个小正方形，然后让其上面左右都有一个圆边角，就像一个小座位啦~

.seat{background-color:darkgrey;width: 15px;height: 12px;border-top-left-radius: 6px;border-top-right-radius: 6px;margin: 0px 3px;}

.seat设置了三种属性，被占用的（白色），当前选择的（三文鱼色），在showcase展示的被选择的（三文鱼色），其本身是未被选择状态（灰色）。

.seat.occupied{background-color:floralwhite;
}
.seat.selected{background-color:salmon;
}
.seat.seatshow{background-color:salmon;}

.seat:not(.occupied):hover{background-color: salmon;transform: scale(1.2);cursor:pointer;
}
.seat:not(.occupied):active{background-color: salmon;cursor:pointer;
}
.seat:nth-last-of-type(2){margin-left: 20px;
}
.seat:nth-last-of-type(6){margin-left: 20px;
}

3.JavaScript

1.const定义变量
const container: 从.seat-container
const seats: 从.seat:(not occupied
const num：记录选择的电影票数量
const price：总价格
const movieSelect：选择的电影座位
const selectedMovieIndex = localStorage.getItem (‘selectedMovieIndex’);

2.let定义变量（可变的）
ticketPrice = + movieSelect.value

3.声明函数

保存选择的电影的index和moviePrice（价格）

function setMovieData(movieIndex, moviePrice){//localStorage.setItem(key,value) 是本地存储，永久性的，将value存储在key字段localStorage.setItem('selectedMovieIndex',movieIndex);localStorage.setItem('selectedMoviePrice',moviePrice);
}

更新选择的电影总数num以及价格price

function updateSelectedCount(){const selectedSeats=document.querySelectorAll('.seat.selected');//.map()返回一个新数组,里面存着选择的座位的indexconst seatsIndex=[...selectedSeats].map(seat=>[...seats].indexOf(seat));//存储在本地localStorage.setItem('selectedSeats',JSON.stringify(seatsIndex));//计算选择的座位数量，并写到num里const selectedSeatsCount=selectedSeats.length;num.innerText=selectedSeatsCount;//计算总价格price.innerText=selectedSeatsCount*ticketPrice;//将选择的电影和相对于的价格存储在本地
setMovieData(movieSelect.selectedIndex,movieSelect.value);
}

更新populateUI（把被选中的seat加一个selected属性）

//从localStorage获取数据selectedSeats数据，并把被选中的seat加一个selected属性，更新populate UI
function populateUI(){//JSON.parse() 方法将数据转换为 JavaScript 对象。selectedSeats=JSON.parse(localStorage.getItem('selectedSeats'));if(selectedSeats!=null&&selectedSeats.length>0){seats.forEach((seat,index)=>{if(selectedSeats.indexOf(index)>-1){//加属性.selectedseat.classList.add('selected');}});}
}

两个事件

//选择movie事件
movieSelect.addEventListener('change',e=>{ticketPrice=+e.target.value;updateSelectedCount();
});//点击seat事件
container.addEventListener('click', e => {if (e.target.classList.contains('seat') &&!e.target.classList.contains('occupied')) {e.target.classList.toggle('selected');updateSelectedCount();}});

完结撒花~感觉记录了一下印象也更深刻了。

前端小项目（一）| 电影院座位预定（html，css，js）相关推荐

【mysql】只使用数据库DB如何实现--预定系统（古法）电影院座位预定
1. 预定业务流程(以电影院座位预定) 用户看到电影院预定UI,其中有空位和预订的座位. 用户选择座位并向服务器发送请求. 座位是为一个时间段保留,在此期间,用户必须支付(比如10min). 如果用户 ...
白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)
嗨,这里是X,今天带来最近写的一个前端小项目,还挺不错的,所以就在这里分享一下
模仿电影院座位预定效果
效果 Html代码: <html> <head> <title>座位预定</title><link href="style.css&qu ...
前端小项目之在线便利贴
实现的效果如下: 界面可能不是太好看?,考虑到容器的高度会被拉长,因此没有用图片做背景. 预览便利贴涉及的知识点 sass(css 预编译器) webpack(自动化构建工具,实现LESS,CSS ...
前端小项目——模拟微信界面对话框
最近看网课做了个小项目,用到了前端很多知识点用到的知识点: HTML知识点: div大盒子,id为contentALL:包含所有的内容 div头部小盒子,id为header:包含整个对话框的头部信息 ...
618快到了送上自制前端小项目（html css js）
目录 ??.自定义播放器 ??.图片自动消失 .小轮播图 ??.旋转音乐盒前言:这些小项目全都是自创的. 如果需要应用,或则转发的话请与博主联系,感谢你们的理解, 1.自定义播放器在页面中放置2 ...
小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
（云服务器+JQuery+JS+BootStrap+Navicat+AJAX+JavaScript）第一个前端小项目【面试】
目录第一步:登录云服务器查看根目录运行jar包端口被占用 ps -ef:查看使用的端口号 kill -9 端口号:杀掉该进程,取消端口占用 1.配置数据库 2.启动jar包 3.测试swag ...

前端小项目（一）| 电影院座位预定（html，css，js）

前言

1.html

2. CSS

3.JavaScript

前端小项目（一）| 电影院座位预定（html，css，js）相关推荐

最新文章

热门文章