最近，因为朋友在做Android，所以需要在电影院制作被选中的VIEW本机Android，找不到对应的实现方法，不得不求助于前端html5 js来实现。 到了半夜，附上劳动成果。 需要用js二维排列和二维排列初始化的儿童鞋作为demo使用
！ 文档类型pehtmlhtmlheadmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initial-scale=1user-scalable=no '/title电影院选席/titlelinkhref=' CSS/mui.min.CSS ' rel=' style sheet '/link ref jquery/2.0.0/jquery.min.js '/script/headbodydivclass=' wrapper '！ - div class=' ract ' style=' left :0 px； top:0px；'/divdivclass=' dialog ' span/span a1办公桌/div---/div script type=' text/JavaScript ' $ (function () {init ) ) function init () {var pos=new Array； for(varI=0； i 9； I ) {pos[i]=new Array (； for(varj=0； j 15； {pos[i][j]=0； //0表示只有一个空红圈}}pos[2][4]=1； pos[2][5]=1； pos[3][0]=-1； pos[4][0]=-1； pos[5][0]=-1； pos[3][1]=-1； pos[4][1]=-1； pos[5][1]=-1； pos[4][2]=-1； pos[3][14]=-1； pos[4][14]=-1； pos[5][14]=-1； var box=$('.wrapper ' )； for(varI=0； i pos.length； I ) for(varj=0； j pos[i].length； j () if ) pos[I][j]==0)/0在打开显示红色背景的白圈/*这些行的代码时，会出现提示对话框((/*if ) I%2==0) ) box.append ) '/divdivclass=' dialog ' style=' left : ' (I * 6431 ) px； top:'(j*64 ) ) px； ' span style='left: top: '/spanA1办公桌/div '； } else { box.append (' div class=' ract ' style=' left : ' (I * 64 ) ) px； top:'(j*6432 ) ) px； '/divdivclass=' dialog ' style=' left : ' (I * 6431 ) px； top:'(j*6432 ) ) px； ' span style='left: top: '/spanA1办公桌/div '； }*/if(I%2==0) box.append (div class=' ract ' style=' left : ) (I*64 ) ) px； top:'(j*64 ) ) px； (/div )； } else { box.append (' div class=' ract ' style=' left : ' (I * 64 ) ) px； top:'(j*6432 ) ) px； (/div )； }elseif(pos[I][j]==1)/1在座位上显示box.append (divclass=' ract ' style=' background 3360 black； left:'(I*6431 ) ) px； top:'(j*64 ) ) px； (/div )； }elseif(pos[I][j]==-1 ) { //-1表示无所事事}}}}(/script/body/html样式文件：
body {height: 100%； width: 100%； 背景图像3360 URL (./images/1.png )； 背景大小： cover； }.wrapper { position : relative； /*margin: 60px 0 0 40px； */margin : 0自动； max-width: 640px； }.ract {width: 18px； 高： 18px； border-radius: 100%； border : 1px固态硬盘； 后台： red； 位置： absolute； }.dialog {width: 33px； 高： 20px； left: 29px； top: 0px； 位置： absolute； 后台： # f0a d4e； color: #fff； line-height: 20px； 文本对齐3360中心； font-size: 12px； }.dialog span : before { position : absolute； left: -24px； top: 2px； 内容： '； border-top :8 pxsolidtransparent； 边框-底部33608 pxsolidtransparent； border-left :12 pxsolidtransparent； 边框光336012 px solid # f0a d4e； }.u-tri : before { position : absolute； left: -24px； top: 4px； 内容： '； border-top :8 pxsolidtransparent； 边框-底部33608 pxsolidtransparent； border-left :12 pxsolidtransparent； border-right :12 pxsolidgreen； }运转效果图：