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)

相关文章
|
7天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
30天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
120 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
29天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
32 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
JavaScript 前端开发 搜索推荐
语义化 HTML 编写一个原生 Web Components 组件
使用语义化 HTML 编写一个原生 Web Components 组件
|
Web App开发 移动开发 前端开发
HTML原生组件
本文转载自水墨寒的博客
1970 0

热门文章

最新文章