js逐步教你实现原生电影院系统(html逻辑 css逻辑 js逻辑)

简介: js逐步教你实现原生电影院系统(html逻辑 css逻辑 js逻辑)

html部分:

<div class="movie-container">
        <h1>欢迎来到cyg在线影院</h1>
        <div>
            选择影片:
            <select id="movie">
                <option value="32">寄生虫(票价:32元)</option>
                <option value="35">小丑(票价:35元)</option>
                <option value="38">好莱坞往事(票价:38元)</option>
                <option value="30">玩具总动员(票价:30元)</option>
            </select>
        </div>
        <ul class="showcase">
        <li>
            <div class="seat"></div>
            <small>可选</small>
        </li>
        <li>
            <div class="seat selected"></div>
            <small>已选</small>
        </li>
        <li>
            <div class="seat occupied"></div>
            <small>不可选</small>
        </li>
        </ul>
            <div class="screen"></div>
            <div class="container">
                <div class="row">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>
                <div class="row">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat occupied"></div>
                    <div class="seat occupied"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>
                <div class="row">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat occupied"></div>
                    <div class="seat occupied"></div>
                </div>
                <div class="row">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>
                <div class="row">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat occupied"></div>
                    <div class="seat occupied"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>
                <div class="row">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat occupied"></div>
                    <div class="seat occupied"></div>
                    <div class="seat occupied"></div>
                    <div class="seat"></div>
                </div>
            </div>
            <p class="text">
                您已经选择了:<span id="count">0</span>个座位,总计票价为<span id="total">0</span>元
            </p>
    </div>

图片:
在这里插入图片描述

css部分:

*{padding: 0px;margin: 0px;list-style: none;}
        body
        {
            background-color: #242333;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, Helvetica, sans-serif;
        }
        h1
        {
            margin-bottom: 20px;
        }
        .movie-container select
        {
            background-color: #fff;
            border:0;
            border-radius: 5px;
            font-size: 14px;
            padding: 5px 15px;
            margin-left: 10px;
        }
        .seat
        {
            background-color: #444451;
            height: 12px;
            width: 15px;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            margin: 3px;
        }
        .seat.selected
        {
            background-color: #6feaf6;
        }
        .seat.occupied {
          background-color: #fff;
        }
        .seat:nth-of-type(2)
        {
            margin-right: 18px;
        }
        .seat:nth-last-of-type(2) {
          margin-left: 18px;
        }
        .seat:not(.occupied):hover {
          cursor: pointer;
          transform: scale(1.2);
        }
        .showcase .seat:not(.occupied):hover {
          cursor: default;
          transform: scale(1);
        }
        .showcase
        {
            background-color: rgba(0,0,0,0.1);
            padding: 5px 10px;
            border-radius: 5px;
              color: #777;
              list-style-type: none;
              display: flex;
              margin-top: 20px;
              justify-content: space-between;
        }
        .showcase li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.showcase li small {
  margin-left: 2px;
}
.container
{
    perspective: 1000px;
    margin-bottom:30px;
    margin-left: 60px;
}
.screen {
  background-color: #fff;
  height: 70px;
  width: 100%;
  margin: 15px 0;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}
.row
{
    display: flex;
}
.text
{
    margin: 5px 30px;
}
.text span
{
    color: #6feaf6;
}

css逻辑;
第一步body;清除系统默认的样式.
第二步h1:body里面的flex布局,主轴x居中,侧轴y垂直居中.高度为height: 100vh;,为什么,因为系统默认宽为100%,高为0,要垂直居中得100vh高度才行啊.
第三步:
在这里插入图片描述
设置select里面的颜色为#fff,边框为无,文字为14px
,本身水平扩大5px,垂直扩大15.距离选择影片10px.
第四:在这里插入图片描述
这里面的在这里插入图片描述
设置默认颜色为#444451,高度为12px,宽度为15px,左上角与右上角都是10px,代表某一个角度的水平与垂直都去掉10px,并且每个元素距离他都是3px.

第五:在这里插入图片描述覆盖之前的颜色改为:
在这里插入图片描述

第七步:在这里插入图片描述
代表在这里插入图片描述

在这里插入图片描述

第八步:
在这里插入图片描述意思是:
第一步:在.seat中当没有不可选的时候,:hover的时候,
倍数变大到1.2,
第二步;在.showcase的区域内,没有效果.(就算触碰到没有不可选的情况下)也没有效果.

.showcase
        {
            background-color: rgba(0,0,0,0.1);
            padding: 5px 10px;
            border-radius: 5px;
              color: #777;
              list-style-type: none;
              display: flex;
              margin-top: 20px;
              justify-content: space-between;
        }

在这里插入图片描述

图片:
在这里插入图片描述

.showcase
        {
            background-color: rgba(0,0,0,0.1);
            padding: 5px 10px;
            border-radius: 5px;
              color: #777;
              list-style-type: none;
              display: flex;
              margin-top: 20px;
              justify-content: space-between;
        }
        .showcase li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

在这里插入图片描述

.showcase
        {
            background-color: rgba(0,0,0,0.1);
            padding: 5px 10px;
            border-radius: 5px;
              color: #777;
              list-style-type: none;
              display: flex;
              margin-top: 20px;
              justify-content: space-between;
        }
        .showcase li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.showcase li small {
  margin-left: 2px;
}

在这里插入图片描述

.row/*这一句至关重要*/
{
    display: flex;
}

让seat不在全部都垂直排列.flex是水平排列的.
在这里插入图片描述

js部分;

<script type="text/javascript">
        const container = document.querySelector(".container");
        const seats = document.querySelectorAll(".row .seat:not(.occupied)");
        const count = document.getElementById("count");
        const total = document.getElementById("total");
        const movieSelect = document.getElementById("movie");
        let ticketPrice = +movieSelect.value;//加+代表Number,不加代表字符串
        populateUI();
        movieSelect.addEventListener('change',e=>// 电影下拉框事件监听
        {
            ticketPrice=+e.target.value;//意思是:某一个option的值强行变成Number赋值给票价
            setMovieData(e.target.selectedIndex,e.target.value);
            //console.log(e.target.selectedIndex,e.target.value);//index从0开始,值为value
            undateSeletedCount();
        });//下拉框改变时
        container.addEventListener("click",e=>// 座位点击事件
        {
            if(e.target.classList.contains("seat")&&!e.target.classList.contains("occupied"))//意识是如果e.target标签中包含seat的话并且e.target中不包含occupied
            {
                e.target.classList.toggle("selected");
                undateSeletedCount();
            }
        });
        function setMovieData(movieIndex, moviePrice)//保存电影索引值和票价
        {
            //保存到本地存储中
            localStorage.setItem("selectedMovieIndex", movieIndex);//电影索引值
            localStorage.setItem("selectedMoviePrice", moviePrice);//票价
        }
        function undateSeletedCount()/// 更新座位数及总票价
        {
            const selectedSeats=document.querySelectorAll(".row .seat.selected");
            //console.log(selectedSeats);//如果这里要有值得点击某一个座位
            const seatsIndex=[...selectedSeats].map(seat=>[...seats].indexOf(seat));//把点击的座位
            //console.log(...seats);//这以上的两句的意思是:点击的[...selectedSeats].map(seat)在[...seats].indexOf(seat)中第一次出现的索引值.
            //保存到本地存储中.
            localStorage.setItem("selectedSeats",JSON.stringify(seatsIndex));//意思是因为是数组所以转换为字符串然后保存到本地存储中.

             const selectedSeatsCount = selectedSeats.length;//点击的数量
              count.innerText = selectedSeatsCount;//数量(座位)
              total.innerText = selectedSeatsCount * ticketPrice;//*起来的票价
              /**/
              //console.log( "座位"+count.innerText ,"票价"+total.innerText);
        }
        function populateUI() {// 获取本地数据并渲染样式
            const selectedSeats=JSON.parse(localStorage.getItem("selectedSeats"));//点击的
            if(selectedSeats!=null&&selectedSeats.length>0)
            {//意思是:保存起来的点击的正方形。不为空并且至少有一个的话.
                seats.forEach((seat,index)=>//遍历渲染颜色
                    {
                        if(selectedSeats.indexOf(index)>-1)
                        {
                            seat.classList.add("selected");
                        }
                    });
            }
              const selectedMovieIndex = localStorage.getItem("selectedMovieIndex");
              //意思是option的index值,在不为空的条件下,点击的是哪一个就赋值设置哪一个·的座位与票价。
              // movieSelect.selectedIndex 代表哪一个option从0开始哦
               if (selectedMovieIndex !== null) {
    movieSelect.selectedIndex = selectedMovieIndex;
  }
        }
    </script>

js逻辑;
第一步;获取需要的.

const container = document.querySelector(".container");
        const seats = document.querySelectorAll(".row .seat:not(.occupied)");
        const count = document.getElementById("count");
        const total = document.getElementById("total");
        const movieSelect = document.getElementById("movie");
        let ticketPrice = +movieSelect.value;

第二步:

movieSelect.addEventListener('change',e=>
        {
            ticketPrice=+e.target.value;    setMovieData(e.target.selectedIndex,e.target.value)
            undateSeletedCount();
        });

意思是;电影下拉框下拉的时候,某一个option的值+变成数字赋值给票价.

container.addEventListener("click",e=>
        {
            if(e.target.classList.contains("seat")&&!e.target.classList.contains("occupied"))
            {
                e.target.classList.toggle("selected");
                undateSeletedCount();
            }
        });

这个函数的意思是;点击座位触发的事件,条件是:
如果e.target标签中包含seat的话并且e.target中不包含occupied(

)像这种.就渲染选中的颜色.
function setMovieData(movieIndex, moviePrice)
        {
            
            localStorage.setItem("selectedMovieIndex", movieIndex);
            localStorage.setItem("selectedMoviePrice", moviePrice);
        }

这个函数的意思是;保存/option>的某一个,和保存票价.

function undateSeletedCount()
        {
            const selectedSeats=document.querySelectorAll(".row .seat.selected");
            
            const seatsIndex=[...selectedSeats].map(seat=>[...seats].indexOf(seat));
            
            localStorage.setItem("selectedSeats",JSON.stringify(seatsIndex));中.

             const selectedSeatsCount = selectedSeats.length;
              count.innerText = selectedSeatsCount;
              total.innerText = selectedSeatsCount * ticketPrice;
             
        }

这个函数的逻辑是;更新座位数和总票价的。
第一步:先获取选中的座位号,
第二步:点击的座位号的索引保存。
第三步:保存到本地存储中.因为是数组所以转换为字符串然后保存到本地存储中.

第四步:计算座位的数量,和座位*票价的得出了的总票价.
在这里插入图片描述

function populateUI() {// 获取本地数据并渲染样式
            const selectedSeats=JSON.parse(localStorage.getItem("selectedSeats"));//点击的
            if(selectedSeats!=null&&selectedSeats.length>0)
            {//意思是:保存起来的点击的正方形。不为空并且至少有一个的话.
                seats.forEach((seat,index)=>//遍历渲染颜色
                    {
                        if(selectedSeats.indexOf(index)>-1)
                        {
                            seat.classList.add("selected");
                        }
                    });
            }
              const selectedMovieIndex = localStorage.getItem("selectedMovieIndex");
              //意思是option的index值,在不为空的条件下,点击的是哪一个就赋值设置哪一个·的座位与票价。
              // movieSelect.selectedIndex 代表哪一个option从0开始哦
               if (selectedMovieIndex !== null) {
    movieSelect.selectedIndex = selectedMovieIndex;
  }
        }

意思是;
第一步:获取到本地存储中的点击的数据,
第二步:如果有的话,就渲染颜色,在这里插入图片描述
意思是option的index值,在不为空的条件下,点击的是哪一个就赋值设置哪一个·的座位与票价。

          // movieSelect.selectedIndex 代表哪一个option从0开始哦
          ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/20201021021429750.png#pic_center)

相关文章
|
5天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
58 33
|
27天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
104 24
|
1月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
52 13
|
1月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
49 3
|
8月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
272 7
|
8月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
124 6
|
8月前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
229 4
|
8月前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
226 3
|
8月前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
323 2
|
8月前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
129 2

热门文章

最新文章