Question

我正在使用JQuery开发小型游戏。

我创建了一个带有图像的按钮，当我单击按钮时，计时器开始倒计时，但是在单击按钮事件之前，计时器位于底部，一旦单击按钮，计时器就会显示在顶部（这就是我想要的位置），无法弄清楚为什么.....

$(document).ready(function() {
    
    $("#startBtn").on("click", function() {
        $(this).hide();
        });
    });

    //set and display timer on button click

    var timer = null;
    var time = 0;
    $("#startBtn").click(function() {
        time = 120;
        showTimer();
        timer = setInterval(showTimer, 1000);
    });

    function showTimer() {
        if(time < 0) {
            clearInterval(timer);
            return;
        }
        function pad(value) {
            return(value < 10?'0':"") + value;
        }
        $("#timer").text(Math.floor(time/60)+':' + pad(time%60));
        time--;
    }

body {
background-image: url(https://www.joblo.com/assets/images/oldsite/newsimages1/avengers-infinity-war-main.jpg);
background-repeat: no-repeat;
background-size: 100%, 90%;
}

h1 {
    text-align:center;
    font-size: 100px;
    color:white;
}

#startBtn {
    width: 250px;
    height:250px;
    margin-left:450px;
    margin-right:250px;
    margin-top: 180px;
}

.timeRemaining {
    color:white;
    margin-left:350px;
    font-size: 50px;
}

#timer {
    color: white;

}

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Trivia Game</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
            <h1>Trivia Game</h1>
        </div>

        
        <input type="image" id="startBtn" src="assets/images/start.jpg" value="click me" onclick="myFunction()"/> 
        

        <div class="row">
            <div class="col-lg-12">
            <div class="timeRemaining">
                <p>Time Remaining:
                    <span id="timer"></span>
            </div>
        </div>



    </div>

    <script src="assets/javascript/app.js"></script>
    </div>
</body>
</html>

Answer 1

这是因为您的margin-top为margin-top：180px；按钮，单击按钮时将其隐藏。一旦隐藏按钮，分配给按钮的边距也会丢失，这就是计时器排在最前面的原因。您要修复它吗？

Answer 2

因为当您单击按钮消失并且计时器占据其位置时，将按钮位置更改为timeRemaining div的底部并删除onclick="myFunction()"，所以您已经单击了id

$(document).ready(function() {
    
    $("#startBtn").on("click", function() {
        $(this).hide();
        });
    });

    //set and display timer on button click

    var timer = null;
    var time = 0;
    $("#startBtn").click(function() {
        time = 120;
        showTimer();
        timer = setInterval(showTimer, 1000);
    });

    function showTimer() {
        if(time < 0) {
            clearInterval(timer);
            return;
        }
        function pad(value) {
            return(value < 10?'0':"") + value;
        }
        $("#timer").text(Math.floor(time/60)+':' + pad(time%60));
        time--;
    }

body {
background-image: url(https://www.joblo.com/assets/images/oldsite/newsimages1/avengers-infinity-war-main.jpg);
background-repeat: no-repeat;
background-size: 100%, 90%;
}

h1 {
    text-align:center;
    font-size: 100px;
    color:white;
}

#startBtn {
    width: 250px;
    height:250px;
    margin-left:450px;
    margin-right:250px;
    margin-top: 180px;
}

.timeRemaining {
    color:white;
    margin-left:350px;
    font-size: 50px;
}

#timer {
    color: white;

}

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Trivia Game</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
            <h1>Trivia Game</h1>
        </div>

        
        
        

        <div class="row">
            <div class="col-lg-12">
            <div class="timeRemaining">
                <p>Time Remaining:
                    <span id="timer"></span>
            </div>
        </div>
        
        <input type="image" id="startBtn" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" value="click me" /> 



    </div>

    <script src="assets/javascript/app.js"></script>
    </div>
</body>
</html>

计时器位置在JQuery中显示为双

2 个答案: