JS电影院在线选座简化案例
不考虑后端数据库，只考虑前端设计。
假设单个影厅单场次，⽤三张⼩图⽚表⽰座位：空座已售选座。
⽤⼆维数组保存座位信息，数组元素0-空座，1-已售，2-选座。⽤createElement、appendChild根据⼆维数组动态⽣成选座图，赋予座位图⽚onclick事件处理选座。运⾏结果如下：js 二维数组
代码如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<script>
var seatmap=[[0,1,0,0],[0,0,1,0],[0,0,0,0],[0,0,0,0]];
var roomNode = ElementById("room");
for(i=0;i<4;i++){
var divNode = ateElement('div');
divNode.id="row"+i;
roomNode.appendChild(divNode);
for(j=0;j<4;j++){
addSeatImg(i,j);}}}
function pick_seat(i,j){
var imgObj = ElementById("img"+i+"_"+j);
if (seatmap[i][j]==1) //如果座位已售，则不可选
return 0;
else if (seatmap[i][j]==0){
imgObj.src="images/已选.gif";
seatmap[i][j]=2;}
else{
seatmap[i][j]=0
imgObj.src="images/空座.gif";}}
function addSeatImg(i,j){
var imgNode = ateElement("img");//创建⼀个图⽚
if( seatmap[i][j]==1) //初始化时只有空座和已售两种情况
imgNode.src = "images/已卖.gif";//设置图⽚节点的src属性
else
imgNode.src = "images/空座.gif";
imgNode.id="img"+i+"_"+j;
imgNode.style.margin = 'auto 4px';  //设置座位横向间隔
imgNode.title = "座位号"+(i+1)+"排"+(j+1)+"号";//设置图⽚节点的title属性  imgNode.setAttribute("onclick","pick_seat("+i+","+j+")");
var divNode = ElementById("row"+i);
divNode.appendChild(imgNode);}//追加图⽚节点到div层中
</script></head><body>
<div id="room" class="testDiv"></div></body></html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。