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

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

本文关键字：计时器 下一个 淡出 如果 添加      更新时间：2023-09-26

我是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函数，该函数可以通过两种方式调用——响应点击事件和响应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;
    });
});

演示

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

我还包含了一个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。

相关文章：