Question

我遇到了困扰我好几天的问题。我希望计时器在每次成功点击图形和每次错过的点击（一个点击任何地方，但在盒子上）上添加+ 2-3秒，以显示一些消息，如＆＃34;你失败了＃34; 编辑：我得到了计时器，只在第一次点击时启动，但之后我不知道如何在成功点击时继续添加秒数。我在这里申请代码：

HTML：

        <div id="main">
            <div>
                <ul id="nav">
                    <li>Score: <p id="score">0</p> </li>
                    <li>Time: <p id="count">3</p> </li>
                </ul>
            </div>
             <div id="test" >
                 <p id="textHid"> CLICK ME!</p>
             </div>
    </div>

CSS：

            #test {
                position:absolute;
                width:400px;
                height:400px;
                background-color:#d2fcd9;
            }
            #textHid {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                font-size: 70px ;
            }
            #nav {
                padding: 1.05%;
                overflow: hidden;
                background-color: #333;
                list-style-type: none;
                margin: 0;
            }

            li {
                float: left;
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 18px;
                margin-left: 3.5%;
            }
            #count {
                display: inline
            }
            #score {
                display: inline;
            }

jQuery：

$('#test').click(function () {

    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#test'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;

    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax ),
        width: Math.floor(getRandomArbitrary(0.7, 1) * divWidth ),
        height: Math.floor(getRandomArbitrary(0.7, 1) * divHeight ),
        backgroundColor: "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"
    });

    $('#score').html(function(i, val) { return val*1+1 });

});

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

$('#textHid').click( function() {

    //$("#test").removeAttr("main");
    //$("#textHid").hide();
   document.getElementById('textHid').remove();
   this.remove();
});

function startTimer(){
    var counter = 3 ;
    setInterval(function() {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = counter;
        }

        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }

    }, 1000);
}


$("#test").click(function(){
    startTimer();
});

Answer 1

要检查某人是否点击了该按钮而不在其外部，您可以使用e.stopPropagation()

$("#textHid").click(function (e) {
  // do what you want to do to 'increase' the user's score
  alert("You clicked the button!");

  // now, this is important to stop a click on the button from
  // also being a click on the elements which contain the button:
  e.stopPropagation();
});
                    
$("#main").click(function () {
  alert("Ouch, you missed the button :(");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <button id="textHid">Click me!</button>
</div>

如果你的意思是任何地方，除了按钮应该是失败的，你可以使用$(document)代替$("#main")。

Answer 2

问题是每次点击，你创建另一个间隔，并确信这不是我们想要的。我们只需修复代码的设计，其他问题也将解决。

1）我会制作两个按钮，一个用于启动和初始化游戏。另一个是你在游戏中点击的框。这样我们就不会让我们的按钮点击混乱，代码更容易阅读。每次单击开始时，该按钮都会初始化游戏并启动计时器，隐藏自身并显示游戏框。每次单击游戏框时，都会添加一个点并添加时间。

2）将您的count（剩余时间）变量存储为全局变量，以便每个人都可以访问它！此版本的JS（在ES6之前）仅具有功能和全局范围，因此在定义此counter变量时，无法从其他控件访问它。将此变量外部声明为全局变量。

请参阅以下代码示例：

＆＃13;

$('#gameBox').click(function () {

    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#gameBox'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;

    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax ),
        width: Math.floor(getRandomArbitrary(0.7, 1) * divWidth ),
        height: Math.floor(getRandomArbitrary(0.7, 1) * divHeight ),
        backgroundColor: "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"
    });

    $('#score').html(function(i, val) { return val*1+1 });
    
    counter += 1;
    span = document.getElementById("count");
    span.innerHTML = counter;

});

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

var counter = 3;

function startTimer(){
    var timer = setInterval(function() {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = counter;
        }

        if (counter <= 0) {
            alert('sorry, out of time');
            clearInterval(timer);
            $('#test').unbind();
            $('#gameBox').hide();
            $('#startButton').show();
            $('#startButton').text("You lost! Try again!");
            
        }
    }, 1000);
}


$("#startButton").click(function(){
    counter = 3;
    span = document.getElementById("count");
    span.innerHTML = counter;
    startTimer();
    $(this).hide();
    $('#gameBox').show();
});

$('#gameBox').hide();

＆＃13;

#gameBox {
    position:absolute;
    width:400px;
    height:400px;
    background-color:#d2fcd9;
}
#startButton {
    width:300px;
    height:100px;
    padding: 25px;
    background-color:#d2d9fc;
}
#nav {
    padding: 1.05%;
    overflow: hidden;
    background-color: #333;
    list-style-type: none;
    margin: 0;
}

li {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    margin-left: 3.5%;
}
#count {
    display: inline
}
#score {
    display: inline;
}
.off {
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
    <div>
        <ul id="nav">
            <li>Score: <p id="score">0</p> </li>
            <li>Time: <p id="count">3</p> </li>
        </ul>
    </div>
    <div id="startButton"> CLICK ME!</div>
    <div id="gameBox"></div>
</div>

＆＃13;

设置计时器以在多次点击时重置？

2 个答案: