JQuery做的一个简单的点灯游戏分享(4)

时间:2014-08-04 12:03来源:网络整理作者:网络点击: 次

分享到：

document.getElementById("step").innerHTML = step; }); } function changeButton(id) { var button = document.getElementById(id); if (button.className === "darkButton") { button.className = "lightButton";

                document.getElementById("step").innerHTML = step;
            });
        }

function changeButton(id) {
var button = document.getElementById(id);

            if (button.className === "darkButton") {
                button.className = "lightButton";
            }
            else {
                button.className = "darkButton";
            }
        }

        function createButton(id) {
            var button = document.createElement('button');
            button.id = id;
            button.className = "darkButton";
            return button;
        }
    </script>
</head>

<body>
    <h1>Turn all the light bulbs if you can!</h1>
    Hello
    <div id="option">
        <label for="X">横向：</label>
        <input type="number" id="X" value="5" />
        <label for="Y">纵向：</label>
        <input type="number" id="Y" value="4"/>
        <button id="startButton">开始游戏</button>
    </div>
    <div id="content">

    </div>
    <div id="stepCounter">
        您已经移动了 <label id="step">0</label> 步。
    </div>
</body>
</html>

如果想运行代码，只需要把最开始的样式表保存成app.css，然后把这一段完整的代码保存成default.htm，然后放在同一个文件夹下，用浏览器打开htm文件就行了（IE要启用ActiveX）。

需要注意的是，这玩意和浏览器的兼容性有很大的关系，所以不保证在所有浏览器（和任意版本）上都能正常运行。。。

对了，最后多说一点。你可以用Visual Studio 2012来编辑html和JavaScript，会有Intellisense，还可以直接加断点调试，非常方便。