JS实现电影院选座位

效果图

1.HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><link rel="stylesheet" type="text/css" href="style/index.css" /><script type="text/javascript" src="js/common.js"></script><script type="text/javascript" src="js/data.json"></script></head><body><div class="movie"><div class="title"><div class="title1"></div><div class="title2"><div class="title21"></div><div class="title22"></div><div class="title23"></div></div></div><div class="content"></div><div class="bottom"><div class="bottomLeft"></div><div class="bottomRight">￥<span class="price">0.00</span></div></div></div><script type="text/javascript" src="js/index.js"></script></body>
</html>

2.CSS代码

*{margin: 0;
}
div{box-sizing: border-box;
}
.movie{width: 1200px;border: solid 1px #999;margin: 50px auto 0;padding: 20px 20px 80px;position: relative;
}
.movie .title{width: 100%;height: 80px;
}
.movie .title .title1{height: 20px;font-size: 24px;font-weight: bold;margin-bottom: 16px;
}
.movie .title .title2{height: 20px;color: #aaa;font-size: 16px;display: flex;
}
.movie .content{text-align: center;
}
.movie .content .col{display: inline-block;width: 50px;height: 50px;background-image: url(../images/01.png);transition: 0.5s;
}
.movie .bottom{width: 100%;height: 60px;background-color: #ffa500;position: absolute;bottom: 0;left: 0;line-height: 60px;display: flex;
}
.movie .bottom .bottomLeft{width: 960px;height: inherit;text-indent: 10px;
}
.movie .bottom .bottomLeft span{color: #fff;font-size: 18px;margin-right: 10px;
}
.movie .bottom .bottomRight{width: 240px;height: inherit;background-color: #3385ff;font-size: 40px;color: #ff0;text-align: center;
}

3.JS代码

/*
common.js封装了两个函数
// 两个选择器
let $ = (selector) => document.querySelector(selector);
let $$ = (selector) => document.querySelectorAll(selector);// 创建节点
function create(tagName, className = "") {let nodes = document.createElement(tagName);nodes.className = className;return nodes;
}**/// 生成标题
$(".title1").textContent = movie.name;
$(".title21").textContent = movie.room;
$(".title22").textContent = movie.date;
$(".title23").textContent = movie.time;// 生成座位
movie.seat.forEach((seat, index) => {// 生成行let rowNode = create("div", "row");let del1 = (rowNode.dataset.rows = index + 1);// 生成列for (let i = 0; i < seat; i++) {let colNode = create("span", "col");let del2 = (colNode.dataset.cols = i + 1);colNode.dataset.dels = `${del1}${del2}`;colNode.dataset.check = "0"; //0就是没有选中，1就是选中了rowNode.append(colNode);}$(".content").append(rowNode);
});
let count = 0;
const max = 5;
// 单击事件
$(".content").addEventListener("click", function () {if (event.target.className === "col") {if (event.target.dataset.check === "0") {count++;if (count > 5) {count = 5;window.alert("您最多购买5张电影票");} else {event.target.style.backgroundPosition = "-50px 0";event.target.dataset.check = "1";// 选的座位let rows = event.target.parentElement.dataset.rows;let cols = event.target.dataset.cols;let leftCon = create("span", "con");leftCon.dataset.del = event.target.dataset.dels;leftCon.textContent = `${rows}排${cols}座`;$(".bottomLeft").append(leftCon);}} else {event.target.style.backgroundPosition = "0 0";event.target.dataset.check = "0";let spans = $$(".bottomLeft .con");for (let i = 0; i < spans.length; i++) {if (spans[i].dataset.del === event.target.dataset.dels) {$(".bottomLeft").removeChild(spans[i]);}}count--;}// 生成价格$(".price").textContent = (count * movie.price).toFixed(2);}
});

4.数据

let movie={"name":"这个杀手","room":"2号厅","date":"2021年11月6号","time":"10:30","seat":[10,12,14,16,18,16,16,16,16,16],"price":19.8
}

5.图片

JS实现电影院选座位相关推荐

[006]小程序系列 | 简单实现电影院选座位Demo
效果: 渲染:  <view class='view-price'><view class='view-price-num'><im ...
电影院选座(最优位置)问题
场景描述电影院选座位,实现每次选最优位置的逻辑.最优判断逻辑如下:位置离中心越近,位置越好(比如9*9的座位,第4排5号,比第1排1号位置更好) 座位实体 @Data @NoArgsConstruc ...
php 影院选座js代码,在react中用canvas做一个电影院选座功能
又到了每日分享了.这次分享的是:在react中用canvas做一个电影院选座功能. 前言:项目采用create-react-app脚手架,就是做了一个效果所以只有一个页面但是也用了react-rout ...
android studio电影院选座,8排电影院选座最佳位置
8排电影院选座最佳位置在哪里呢?8排电影院属于小影厅,小影厅银幕宽度在10米以下,座位100以内,座位排数通常拥有8-14排,小影厅整体空间小,选座时要选中间稍靠后一些的位置.由于整体排数少,因此选即 ...
css 选座,纯html+css中实现静态选座位效果技巧（input+label使用小技巧）
很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...
基于PHP电影院选座售票系统设计与实现开题报告
专科/本科生毕业论文基于PHP+Mysql电影院购票选座系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: XXXX大学本科生毕业论文(设计)开题报告书 ...
简单实现电影院选座效果
这是一个简单的电影院选座效果,实现该效果大致分为三步: 自定义view进行绘制: 手势缩放效果的实现: 手势触摸被选和未被选效果的实现: 先来看第一步,效果的绘制: public class Move ...
电影院选座问题----go
电影院选座问题----go 题目思路代码复杂度分析题目抖音电影票业务支持电影院选座,需要在用户买票时自动推荐座位,如果一个用户买了多张票,则需要推荐相邻(上下相邻.左右相邻都可)的座位.现在 ...
Java----使用二维数组完成一个电影院选座系统
用Java的二维数组来完成模拟一个电影院选座系统模拟座位这里先定义一个二维数组,用来模拟电影院的座位 public class ChooseSeat{public static void main ...

JS实现电影院选座位

JS实现电影院选座位相关推荐

最新文章

热门文章