m0_67982952
2022-04-27 10:04
采纳率: 46.7%
浏览 207
已结题

我已经修改了元素的innerHTML,但是页面上没有变化,请问如何解决?

img

img


如图,我打算实现点击开始游戏后,按钮中的开始游戏就能变成游戏中,但是发现有问题,请问如何修改,完整代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery拼图小游戏</title>
    <link rel="stylesheet" href="css/puzzleGame.css" />
    <script src="js/jQuery.js"></script>
    <script src="js/puzzleGame.js"></script>

    <style type="text/css">
        #wrap{
            /*width: 100vw;*/
            height: 90vh;
            display: flex;
            justify-content: center;

            align-items: center;
        }
        #content{
            margin-right: 7vw;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        #imgArea{
            margin-top: 1rem;
            box-shadow: 0 0 8px 6px #6c6c6c;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            top: 0px;
            position: relative;
            width: 509px;
            height: 509px;
        }
        .wrap-title {
            display: flex;
            justify-content: center;
            flex-direction: column;
            font-family: 'Gugi', cursive;
            text-transform: capitalize;
        }

    </style>
</head>

<body>
    <div id="wrap">
        <div id="content">
            <div id="imgArea"></div>
        </div>

        <div class="wrap-title">
            <h1 class="main-title">puzzle game</h1>
            <p class="play-time">0</p>
            <ul class="text-title">
                <li><i class="fa fa-star" aria-hidden="true"></i>1、点击游戏难度以更改</li>
                <li><i class="fa fa-star" aria-hidden="true"></i>2、点击开始游戏,打乱图片</li>
                <li><i class="fa fa-star" aria-hidden="true"></i>3、交换图片位置,复原图片</li>

            </ul>
            <ul class="img-title">
<!--                <li><img src="img/html.png" alt=""></li>-->
<!--                <li><img src="img/css.png" alt=""></li>-->
<!--                <li><img src="img/javascript.png" alt=""></li>-->
            </ul>
            <div style="display: flex;align-items: center;">
                <button class="start-button" >开始游戏</button>
                <button class="choice-button">难度选择:</button>
                <select class="target">
                    <option value='{"row":3,"col":3}' selected="selected">3 * 3</option>
                    <option value='{"row":6,"col":6}'>6 * 6</option>
                    <option value='{"row":9,"col":9}'>9 * 9</option>
                </select>

            </div>

        </div>

<!--        <div id="character">-->

<!--            <ul class="orgimage">-->
<!--                <img src="images/man.jpg">-->
<!--            </ul>-->

<!--            <ul>-->
<!--                <li id="gameRule"> 游戏介绍:-->
<!--                    <p>1、点击游戏难度以更改</p>-->
<!--                    <p>2、点击开始游戏,打乱图片</p>-->
<!--                    <p>3、交换图片位置,复原图片</p>-->
<!--                </li>-->
<!--            </ul>-->
<!--            <ul>-->
<!--                <li id="start"> <span><button class="button">开始游戏</button></span> </li>-->
<!--                <li id="level">-->
<!--                    <span><button class="button">难度选择:</button>-->
<!--                        <select class="target">-->
<!--                            <option value='{"row":3,"col":3}' selected="selected">3 * 3</option>-->
<!--                            <option value='{"row":6,"col":6}'>6 * 6</option>-->
<!--                            <option value='{"row":9,"col":9}'>9 * 9</option>-->
<!--                        </select>-->
<!--                    </span>-->
<!--                </li>-->
<!--            </ul>-->

<!--        </div>-->



    </div>


    <script type="text/javascript">

        const playTime = document.querySelector(".play-time");

        let isPlaying = false;
        let timeInterval = null;
        let time = 0;
        function setGame() {
            console.log('setGame')
            isPlaying = true;
            time = 0;

            clearInterval(timeInterval);

            setTimeout(() => {

                timeInterval = setInterval(() => {
                    playTime.innerText = time;
                    time++;
                }, 1000);
            }, 3000)
        }


        $(function() {

            var pg = new puzzleGame(
                '#imgArea',
                'images/liu.jpg'
            )

            //检测游戏状态
            function checkGameStart(noGame, hasGame) {
                if (pg.getGameStatus()) {
                    //游戏复位
                    if (confirm('已经在游戏中,确定要重新开始?')) {
                        hasGame()
                    }
                } else {
                    noGame()
                }
            }

            $(".start-button").click(function() {
                console.log("start")
                setGame();
                const startButton = document.getElementsByClassName("start-button");
                console.log('startButton:',startButton)

                checkGameStart(function() {
                    pg.startGame(function(){
                        alert('真棒,这都没难倒你,恭喜成功完成本次游戏!!!')
                        clearInterval(timeInterval);

                    })
                    console.log('游戏中')
                    startButton.innerHTML = '游戏中'
                    // $button.text('游戏中')
                }, function() {
                    pg.resetGame()
                    $button.text('游戏开始')
                })
            })

            $('.target').change(function(evt) {
                var $button = $(".start-button").find('button')
                var $val = $.parseJSON($(this).val())
                checkGameStart(function() {
                    pg.setGameLevel($val.row, $val.col)
                }, function() {
                    pg.resetGame($val.row, $val.col)
                    $button.text('游戏开始')
                })
            })

        });
    </script>


</body>

</html>

请赐教,不胜感激。

3条回答 默认 最新

相关推荐 更多相似问题