超简单的——电影院（位置实现） 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=3.0,minimum-scale=0.3,user-scalable=1,initial-scale=0.5"/>
	<title></title>
	<style>
        @font-face {
         font-family: 'imgs';
         src: url('imgs/iconfont.eot');
         src: url('imgs/iconfont.eot?#iefix') format('embedded-opentype'),
             url('imgs/iconfont.woff2') format('woff2'),
             url('imgs/iconfont.woff') format('woff'),
             url('imgs/iconfont.ttf') format('truetype'),
             url('imgs/iconfont.svg#iconfont') format('svg');
     }
       .iconfont {
         font-family: "imgs" !important;
         font-size: 16px;
         font-style: normal;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         }
         *{padding: 0;margin: 0;}
         body{width: 100%;}
         ul {list-style: none;margin-left: 40%;}
         #seats{margin-top: 50px;}
        ul li{float: left;margin-left: 5px;}  
   </style>
</head>
<body>
    <div id="seats"></div> 
    <script src="../jquery.js"></script>
    <script type="text/javascript">
        //定义座位二维数组  
        var seatArray = new Array();  
        for(var i=0;i<20;i++){//一维数组长度为30  
            seatArray[i]=new Array();  
            for(var j=0;j<20;j++){//第二维长度为20  
                seatArray[i][j]=1;
            }
        }  
        //添加20行li  
        for(var v=0;v<20;v++){  
            $('#seats').append(
                '<ul name = "chair">'+  
                    '<li><span class="iconfont"></span></li>'+  
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+  
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    '<li><span class="iconfont"></span></li>'+
                    
                '</ul>'+'<br/>')
        }
        $("ul li").click(function(){  
            var row = parseInt($(this).parent().index()/2);  
            var col = $(this).index(); 
            alert('第'+row+'行  第'+col+'列');
            if (seatArray[row][col] == 1) {
                $(this).replaceWith('<li><span class="iconfont"></span></li>');
            }
        }); 
    </script>
</body> 
</html>

　　

posted @ 2021-04-13 14:11  sunyaning  阅读(101)  评论(0)    收藏  举报