JS实现电影票选座的项目示例
简单模拟电影票选座，详细代码如下：
利用js实现给li标签添加和取消属性，来实现选座功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 100px;
margin: 60px auto;
text-align: center;
line-height: 100px;
border: 1px solid black;
}
ul {
width: 650px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
li {
margin: 10px;
width: 80px;
height: 50px;
float: left;
list-style: none;
background: #C0C0C0;
border: 1px solid #C0C0C0;
}
.click {
font-size: 10px;
text-align: center;
line-height: 50px;
font-family: '仿宋';
font-weight: bold;
color: #333;
background: orange;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<p style="clear: both;"></p>
<div>屏幕中央</div>
</ul>
<script>
//没有click类的时候，进行添加，同时对文本进行赋值；反之，清空click类，同时文本值为空
let lis = document.getElementsByTagName('li');//获取li元素
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//getAttribute() 方法返回指定属性名的属性值
let res = this.getAttribute('class');//getAttribute（）判断class属性是否存在
if (!res) {//当属性值不存在
this.setAttribute('class', 'click');//设置属性，添加一个属性
this.innerText = '座位已选';//设置文本
} else {
this.setAttribute('class', '');//取消属性
this.innerText = '';//取消文本
}
}
}
</script>
</body>
</html>
结果，初始化页面：
可以在小方框内随意点击，进行选座，点击一次代表已选座，再点击一次代表取消选座：下图为随意点击后的画面
到此这篇关于JS实现电影票选座的项目示例的文章就介绍到这了,更多相关JS 电影票选座内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click
-
js 判断checkbox是否选中的实现代码
//第几个没有选 <input type="checkbox" name="checkbox1" checked> <input type="checkbox" name="checkbox1"> <input type="checkbox" name="checkbox1" checked> <input type="checkbox
-
js动态设置select下拉菜单的默认选中项实例
利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"
-
js实现checkbox全选和反选示例
复选框全选示例 复制代码 代码如下: <input type="checkbox" name="selectall" value=on onclick="selectAll()"> function selectAll(form) { var obj = document.getElementsByName('selectall'); var cks = document.getElementsByTagName("inpu
-
javascript判断单选框或复选框是否选中方法集锦
提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合. 样例一<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>判断单选框或复选框是否选中</title> </head> <body> <input name
-
用js代码改变单选框选中状态的简单实例
今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 复制代码 代码如下: function doGender(gender) { if (gender == "男") { gel("radionan").style.checked = "checked"; } else { gel("radionv").style.checked = "checked"; }} function
-
js实现的全国省市二级联动下拉选择菜单完整实例
本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
Js动态添加复选框Checkbox的实例方法
首先,使用JS动态产生Checkbox可以采用如下类似的语句: 复制代码 代码如下: var checkBox=document.createElement("input");checkBox.setAttribute("type","checkbox");checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用document.
-
JS实现电影票选座的项目示例
简单模拟电影票选座,详细代码如下: 利用js实现给li标签添加和取消属性,来实现选座功能. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
Android打造炫酷的电影票在线选座app在线选座功能
不知道大家有没有用过,淘宝电影客户端(淘票票)买过电影票,纵观各类在线选座app的在线选座功能 淘宝在线选座功能用户体验最好,用起来最顺手,夸张点说已经到了炉火纯青的地步,下面我们看一下效果: 效果分析: 整个控件分成几个部分,座位图区域.座位缩略图区域.行号区域.屏幕区域 1.座位图可以自由的移动缩放,放大缩小移动后会自动回弹到合适的位置,选中座位会自动放大到合适比例. 2.行号部分跟着座位图缩放以及上下移动,屏幕区域跟着座位图左右移动缩放. 3.当手指按下的时候会出现缩略图,缩略图上有个红色
-
Android自定义view实现电影票在线选座功能
先看看电影票在线选座功能实现的效果图: 界面比较粗糙,主要看原理. 这个界面主要包括以下几部分 1.座位 2.左边的排数 3.左上方的缩略图 4.缩略图中的红色区域 5.手指移动时跟随移动 6.两个手指缩放时跟随缩放 主要技术点 1.矩阵Matrix 2.GestureDetector与ScaleGestureDetector 3.Bitmap的一下基本用法 4.这里只需要重写view的onDraw就可实现全部功能 可以发现这个其实没什么难度,主要就是一些位置的计算. 为了能便于理解首先把要用到
-
js 实现复选框只能选择一项的示例代码
实例如下所示: <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <ul> <li><input type="checkbox" name="ss" onclick="choose(this)">1</li> <li><inpu
-
js判断复选框是否选中的方法示例【基于jQuery】
本文实例讲述了js判断复选框是否选中的方法.分享给大家供大家参考,具体如下: 代码 //设置选中 $('#check1').prop('checked', true); //是否选中 var isChecked = $('#cb').prop('checked'); //或 var isChecked = $('#cb').is(":checked"); var isChecked = $('#cb').attr('checked'); 代码 function publish() {
-
基于jquery实现在线选座订座之影院篇
先给大家展示效果图(支持源码下载哦): 查看演示 源码下载 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座.处理选座数据等. 在这里,我给大家介绍一款基于jQuery的在线选座插件:jQuery Seat Charts,它支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制座位. HTML 我们假设进入电影<星际穿越>的选座页面,页面布局
-
vue echarts实现航班选座案例分析
目录 背景 实现思路 代码分析 获取svg 注册自定义地图 geo组件的配置 举一反三 三 效果图 注意点 背景 最近在echarts官方看到了一个航班选座的示例,感觉很好,可以扩大,缩小,鼠标放置到座位上可以显示座位号,允许默认选中座位.于是在5.1假期抽了一点点时间,来写一篇文章,深入研究分析一下这个示例,解析一下这个示例的完整代码.首先让我们来看下示例的效果图. 实现思路 代码是使用echarts来实现的,主要用到的是svg和自定义地图的相关知识.示例的完整代码 在做选座的功能,我们使用d
-
bootstrap table 多选框分页保留示例代码
在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据. 解决思路: 在分页的时候,吧原先选择的数据用一个全局变量保存,当再次翻页回来时,判断当前页数据是否存在于保存的数据数组中,存在则状态为选择.当然当取消选择的时候也要去删除数组中相应的数据. 为了解决这个问题,在查github上查文档发现有人提出了这个问题,并且作者wenzhixin
-
js和jquery实现监听键盘事件示例代码
项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
-
Vue实现美团app的影院推荐选座功能【推荐】
经常用美团app买电影票,不禁对它的推荐选座功能产生了好奇,于是打算自己实现一个类似的算法,美团app的推荐选座界面如下 最多可以选5个座位,本demo的选座界面如下图 上图是点击 推荐选座5人 后选出的座位(绿色),这个demo和美团app不同的地方在于可以连续进行推荐选座,美团app点击了推荐选座就必须买票才能继续选择. 本demo采用Vue-cli搭建,github地址点此 ,clone后直接npm start即可进行具体操作 算法思考过程 对于这个推荐座位算法,我尝试了不同场次的电影进行