javascript - 单击图标时向计时器添加一秒钟

Question

在我的数字游戏中， children 有 30 秒的时间拍摄与给定问题相关的数字图标，例如“偶数”。我最近添加了两个时钟图标作为奖励。当他们射击蓝色的时，它会增加 3 秒，而射击红色的时会减少 3 秒。

目前时钟被认为是错误的，但我是因为下面的 if 语句。有没有办法可以将时钟合并到这个点击功能中，或者我必须开始一个新的吗？另外，我如何添加和从计时器中取出秒数？

    $(".character").click(function() {
    if ($(this).hasClass("wrong")) {
        $(this).effect("bounce", {
            times: 2,
            direction: 'left'
        }, 300, function() {
            $(this).slideUp("fast")
        });
        miss++;
        attempted++;
        $("#miss").html("Wrong: " + miss);
    } else {
        $(this).effect("explode", 300);
        hit++;
        attempted++;
        $("#hit").html("Right: " + hit);
    }
});
});

这是图标列表

<ul id="container">
    <li><div id="char1" class="character right" vaule="1"></div></li>
    <li><div id="char2" class="character right" vaule="2"></div></li>
    <li><div id="char3" class="character right" vaule="3"></div></li>
    <li><div id="char4" class="character right" vaule="4"></div></li>
    <li><div id="char5" class="character right" vaule="5"></div></li>
    <li><div id="char6" class="character right" vaule="6"></div></li>
    <li><div id="char7" class="character right" vaule="7"></div></li>
    <li><div id="char8" class="character right" vaule="8"></div></li>
    <li><div id="char9" class="character right" vaule="9"></div></li>
    <li><div id="char10" class="character right" vaule="0"></div></li>
    <li><div id="char11" class="character clock up"></div></li>
    <li><div id="char12" class="character clock down"></div></li>
</ul>

fiddle :http://jsfiddle.net/cFKHq/13/

Answer 1

您需要创建一个独立于您的动画的计时器事件。 setInterval 将根据指定的时间量调用自身，在本例中为 1000 毫秒。

var timeLeft = 30;

var timer = setInterval(function() {
    timeLeft--;
    if(timeLeft<1) {
        clearTimeout(timer)        
        alert("finished");
        return;        
    }
    $('#time').html(timeLeft);
},1000)

function adjTime(amt) {
    timeLeft = timeLeft + amt
   if(timeLeft<1) {
        clearTimeout(timer)        
        alert("finished");
        return;
    }
    $('#time').html(timeLeft);
}

测试 HTML:

<div id="time"></div>
<input type="button" onclick="adjTime(3)" value="Add 3 sec" />
<input type="button" onclick="adjTime(-3)" value="Subtract 3 sec" />