草庐IT

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

coder 2024-07-25 原文

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

DEMO

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

我还包含了一个 afterLastQuestion() 函数。在回答最后一个问题(或超时)后修改其操作以执行任何必要的操作。

关于javascript - 添加测验计时器，如果计时器达到 0，则淡出/跳到下一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12118474/

计时javascriptfunctioncodenextjquerysetinterval

有关javascript - 添加测验计时器，如果计时器达到 0，则淡出/跳到下一个的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  3. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  4. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  5. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  6. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  7. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  8. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  9. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  10. ruby - 如果指定键的值在数组中相同，如何合并哈希 - 2

    我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同，我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat

随机推荐