添加测验计时器，淡出/如果计时器达到0，跳到下一个

我对jQuery非常陌生，但熟悉一些其他语言。 我最近买了一个测验类型的脚本，我试图给每个问题添加一个简单的15秒计时器。 这只是一个有趣的测验，所以不用担心用户使用JavaScript来增加时间等。

基本上，如果用户在15秒内没有选择一个问题，它会自动进入下一个问题，定时器重新开始。

答案有.next标记，当选择它时，将转到下一个问题，如下面的代码所示（希望）。

superContainer.find('.next').click(function () {

            $(this).parents('.slide-container').fadeOut(500, function () {
                $(this).next().fadeIn(500)
            });

            return false
});

我遇到的问题是，如果我使用setInterval ，我不知道如何再次选择适当的div来淡入淡出，并在下一个淡入淡出。 我已经尝试了下面的代码和一些类似的废话想法，但它不起作用，但也许它会给我更好的想法。

superContainer.find('.next').click(function () {

    $active_count = $count;

    countInterval = setInterval(function() {
                $active_count--;
                if($active_count <= 0){
                    clearInterval(countInterval);
                    $active_count = $count;
                    $(this).parents('.slide-container').fadeOut(500, function () {
                        $(this).next().fadeIn(500)
                    });
                }
                $('.question-timer').html($active_count);
            }, 1000);

            $(this).parents('.slide-container').fadeOut(500, function () {
                $(this).next().fadeIn(500)
            });

            return false
});

我只在一两天内使用JQuery，所以请原谅任何明显的错误和错误的代码！ 让我知道你是否需要任何其他代码或信息

---

对于第一个jQuery项目来说这是相当棘手的。

诀窍（在此解决方案中）是goNext可以以两种方式调用的goNext函数 - 响应点击事件并响应15秒setTimeout()而不是setInterval() 。

$(function(){
    var questionTimeout = null;

    function goNext($el) {
        clearTimeout(questionTimeout);
        var $next = $el.next();
        $el.fadeOut(500, function() {
            if($next.length > 0) {
                $next.fadeIn(500, function() {
                    questionTimeout = setTimeout(function() {
                        goNext($next);
                    }, 15000);
                });
            }
            else {
                afterLastQuestion();
            }
        });
    }
    function afterLastQuestion(){
        alert("last question complete");
        $start.show();
    }

    var $superContainer = $("#superContainer").on('click', '.next', function() {
        goNext($(this).closest('.slide-container'));
        return false;
    });

    var $start = $("#start").on('click', function(){
        $(this).hide();
        $superContainer.find(".slide-container")
            .eq(0).clone(true,true)
            .prependTo(superContainer)
            .find(".next").trigger('click');
        return false;
    });
});

DEMO

该过程通过点击“开始”链接开始，导致第一个问题被克隆，然后模拟点击克隆的“下一个”链接。 这确保（实际）第一个问题的处理方式与所有其他问题完全相同。

我还包括一个afterLastQuestion()函数。 在最后一个问题被回答（或超时）后，修改它的操作以做必要的事情。

---

你可以把当前的问题保存在一个变量中， next点击和计时器中重置它，例如

var $current;
superContainer.find('.next').click(function (e) {

    e.preventDefault();
    $(this).parents('.slide-container').fadeOut(500, function () {
        $(this).next().fadeIn(500);
        $current = $(this).next();
    });

});​

您只需将其设置为初始化时的第一个问题，并记住在next单击时重置您的计时器

另外，通常最好使用e.preventDefault()而不是return false 。

链接地址: http://www.djcxy.com/p/11111.html

上一篇: Adding a Quiz Timer, Fade Out/Skip to the next if timer reaches 0

下一篇: How to delete xml elements/nodes from xml file larger than available RAM?