JS实现座位选择的问题

JavaScript09

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>

给你"计算一下"那个按钮加一个onclick事件，响应函数如下：

function getAstro(m,d){ return "魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯".substr(m*2-(d<"102223444433".charAt(m-1)- -19)*2,2)}

其中m是月份，d是天， 获取输入框里面的值传进去。