Javascript 单击图标时向计时器添加第二个计时器

在我的数字游戏中，孩子们有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:

您需要创建一个独立于动画的计时器事件

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

var timeLeft=30；
var timer=setInterval（函数（）{
时间限制--；
如果（timeLeft您可以使计时器作为全局计时器计数


我没有数数，而是宣布它为

var game = {
    count: 30,
}

并将count的每个实例修改为game.count

然后，你可以简单地做

game.count += 5 // to add time
game.count -+ 5 // to remove time

当然，这是不安全的（任何有控制台的人都可以简单地键入game.count=1000），但对于儿童游戏来说应该没问题

正确的做法是与私人会员合作。您可以在此处阅读更多信息：(http://www.crockford.com/javascript/private.html)
我摆弄过你的小提琴（叉子：）我想我成功了。我将if循环改为以下内容，如果单击其中一个时钟，它会改变全局计数变量。只有在没有找到时钟的情况下，它才会去检查对错

$(".character").click(function() {
        if ($(this).hasClass("clock")) {
            if ($(this).hasClass("up")) {
                $(this).effect("explode", 300);
                count += 3;
            } else if ($(this).hasClass("down")) {
                $(this).effect("bounce", {
                    times: 2,
                    direction: 'left'
                }, 300, function() {
                    $(this).slideUp("fast")
                });
                count -= 3;
            }
            $('#timer').text(count);
        } else {
            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);
            }
        }
    });

但是这会让所有正确和错误的答案影响时间@AkteeYes，在我做的小提琴中，它会让所有正确和错误的答案影响时间conditions@Milo-J、 很难做一个正确的JSFIDLE，因为您没有为char11和char12定义CSS。做吧，我会给您正确的代码。哦，对不起，我似乎有e根据前面的提琴尝试数字15@AkteeSo我会把时钟做成按钮吗？你有提琴要显示吗？@Diodeu这些按钮只是为了演示代码是如何工作的。根据游戏逻辑，你需要在代码中调用相同的函数。做了另一个小编辑：，需要检查计数是否为0或更小，因为它是c因为那些时钟，一把低到-2。好吧，因为我在另一条评论中看到你没有给出最新的小提琴，我再次更改它以匹配你的最新版本：
$(".character").click(function() {
        if ($(this).hasClass("clock")) {
            if ($(this).hasClass("up")) {
                $(this).effect("explode", 300);
                count += 3;
            } else if ($(this).hasClass("down")) {
                $(this).effect("bounce", {
                    times: 2,
                    direction: 'left'
                }, 300, function() {
                    $(this).slideUp("fast")
                });
                count -= 3;
            }
            $('#timer').text(count);
        } else {
            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);
            }
        }
    });