Javascript 将计时器设置为在多次单击时重置？

我有一个困扰了我好几天的问题。 我希望计时器在每次成功点击图形和每次未点击（点击任何位置，但在框上）时增加+2-3秒，以显示类似“You failed”的消息。 编辑：我得到了计时器，只在第一次点击时启动，但在那之后，我不知道如何在成功点击时继续增加秒数。 我在这里应用我的代码：

HTML:

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();
});

---

要检查某人是否正在单击按钮，而不是在按钮之外，您可以使用

$（“#textHid”）。单击（函数（e）{
//做你想做的事情来“增加”用户的分数
警报（“您单击了按钮！”）；
//现在，这一点很重要，要停止从中单击按钮
//还可以单击包含按钮的元素：
e、 停止传播（）；
});
$（“#主”）。单击（函数（）{
警报（“哎哟，你错过了按钮：（”）；
})；

点击我！

问题是每次单击时，都会创建另一个间隔，并且非常确定这不是我们想要的。让我们修复代码的设计，其他问题也会解决

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

2） 将您的

计数

（剩余时间）变量存储为全局变量，以便每个人都可以访问它！此版本的JS（ES6之前）仅具有功能和全局范围，因此在定义此

计数器

变量的地方，无法从其他控件访问它。改为在外部将此变量声明为全局变量

请参见以下代码示例：

$（“#游戏盒”）。单击（函数（）{
var docHeight=$（document）.height（），
docWidth=$（文档）.width（），
$div=$（“#游戏盒”），
divWidth=$div.width（），
divHeight=$div.height（），
heightMax=docHeight-divHeight，
widthMax=docWidth-divWidth；
$div.css({
左：Math.floor（Math.random（）*widthMax），
顶部：Math.floor（Math.random（）*heightMax），
宽度：数学地板（0.7,1）*等分宽度），
高度：数学楼层（0.7,1）*高度，
背景颜色：“rgb（“+Math.floor（Math.random（）*256）+”、“+Math.floor（Math.random（）*256）+”、“+Math.floor（Math.random（）*256）+”）
});
$（'#score'）.html（函数（i，val）{returnval*1+1}）；
计数器+=1；
span=document.getElementById（“计数”）；
span.innerHTML=计数器；
});
函数GetRandomArbital（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
var计数器=3；
函数startTimer（）{
var timer=setInterval（函数（）{
计数器--；
如果（计数器>=0）{
span=document.getElementById（“计数”）；
span.innerHTML=计数器；
}
if（counter）这里有三个非常不同的问题。我建议在单独的问题中一次解决一个问题，并尝试只发布与该问题相关的代码片段。这使阅读和帮助更容易。是的，你是对的！全部完成！
            #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;
            }

$('#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();
});