JS实现座位选择的问题

JavaScript07

JS实现座位选择的问题,第1张

代码如下。js+html。

但是如同上述 黑马黄子所说。需要考虑数据实时性。自己判断何时需要提交数据。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .main{

            width: 99%

            height:99%

            border: 1px solid #dddddd

            position: relative

        }

    </style>

    <script type="text/javascript">

        function Choose(){

            var mine = this

            this.selections =[]

            this.init = function(rows,cloumns,where){

                var ul = document.createElement("ul")

                var siteNum=1

                for(var i =0i<cloumnsi++){

                    for(var j=0j<rowsj++){

                        var li = document.createElement("li")

                        li.style.listStyle = "none"

                        li.style.width = "50px"

                        li.style.height = "30px"

                        li.style.border ="1px solid #000"

                        li.style.color ="#000"

                        li.style.background ="green"

                        li.style.fontSize ="30px"

                        li.style.lineHeight ="30px"

                        li.style.textAlign ="center"

                        li.style.cursor ="pointer"

                        li.style.marginLeft = (j*52 +10) +"px"

                        if(j>0){

                            li.style.marginTop =  -32 +"px"

                        }else{

                            li.style.marginTop =  0 +"px"

                        }

                        li.textContent = siteNum++

                        ul.appendChild(li)

                    }

                }

                ul.onclick = function(e){

                    var target = e.target || e.srcElement

                    if(target.tagName.toUpperCase() ==='LI'){

                        if('red'===target.style.color){

                            target.style.background ="green"

                            target.style.color= "#000"

                           for(var i=0i< (mine.selections.length)i++){

                               if(mine.selections[i] === target.textContent){

                                   mine.selections.splice(i,1)

                               }

                           }

                        }else{

                            target.style.background = "#ccc"

                            target.style.color ='red'

                            mine.selections.push(target.textContent)

                        }

                    }

                }

                var toWhere = where || document.body

                toWhere.appendChild(ul)

            }

        }

        window.onload = function(){

            var chooser = new Choose()

            chooser.init(20,10)

           document.getElementById("test").onclick = function(){

               console.log(chooser.selections)

           }

        }

    </script>

</head>

<body>

<button id="test">测试</button>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Page Title</title>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

<script>

var row=2,col=11,size=20,gap=5

window.onload=function(){

var wrap=document.createElement("div")

wrap.style.margin="0 auto"

wrap.style.width=(size+gap)*col+"px"

for(var i=0i<rowi++){

var rows=document.createElement("div")

rows.style.float="left"

rows.style.marginBottom=gap+"px"

for(var j=0j<colj++){

var div=document.createElement("img")

div.src="a.png"

div.style.width=size+"px"

div.style.height=size+"px"

div.style.float="left"

div.style.marginLeft=gap+"px"

div.onclick=function(){

!this.abc?this.src="b.png":this.src="a.png"

this.abc=!this.abc

}

rows.appendChild(div)

}

wrap.appendChild(rows)

}

document.body.appendChild(wrap)

}

</script>

</head>

<body>

</body>

</html>