Question

例如，我在数组中有3个问题，第二个问题（bbb？）需要不同的倒数计时器（50秒）。我该怎么做？谢谢您的所有建议:)我是javascript新手... 我有我的代码（一切正常），但每个问题都需要30秒。

这是我的代码：

$(document).ready(function() {
    function openingPage() {
        openScreen = "<p class='text-center main-button-container'><a class='btn btn-success btn-md btn-block start-button' href='#' role='button'>Start</a></p>";
        $("#mainArea").append(openScreen);
    }
    openingPage();

    $("#mainArea").on("click", ".start-button", function(event){
        event.preventDefault(); 
        $('.jumbotron').hide();
        generateQuestions();
        timerWrapper();
    }); 

    $("body").on("click", ".answer", function(event){
        selectedAnswer = $(this).text();
        selectedAnswer === correctAnswers[questionCounter] ? (
            clearInterval(theClock),
            generateWin()) :
            clearInterval(theClock),
            generateLoss())
     }); 

    $("body").on("click", ".reset-button", function(event){
            resetGame();
    }); 
});  

function timeoutLoss() {
    unansweredTally++;
    gameHTML = "<p class='text-center timer-p'>time: <span class='timer'>" + counter + "</span></p>" + "<p class='text-center'>time out, right answer: " + correctAnswers[questionCounter] + "</p>";
    $("#mainArea").html(gameHTML);
    setTimeout(wait, 3000);  
}

function generateWin() {
    correctTally++;
    gameHTML = "<p class='text-center timer-p'>time: <span class='timer'>" + counter + "</span></p>" + "<p class='text-center'>yes: " + correctAnswers[questionCounter] + "</p>" ;
    $("#mainArea").html(gameHTML);
        setTimeout(wait, 3000); 
    }

    function generateLoss() {
        incorrectTally++;
        gameHTML = "<p class='text-center timer-p'>time: <span class='timer'>" + counter + "</span></p>" + "<p class='text-center'>no! right answer: "+ correctAnswers[questionCounter]";
        $("#mainArea").html(gameHTML);
        setTimeout(wait, 4000); 
    }

    function generateQuestions() {
        gameHTML = "<p class='text-center timer-p'>time: <span class='timer'>30</span></p><p class='text-center'>" + questionArray[questionCounter] + "</p><p class='first-answer answer'>A. " + answerArray[questionCounter][0] + "</p><p class='answer'>B. "+answerArray[questionCounter][1]+"</p><p class='answer'>C. "+answerArray[questionCounter][2]+"</p><p class='answer'>D. "+answerArray[questionCounter][3]+"</p>";
        $("#mainArea").html(gameHTML);
    }; 

    function wait() {
        questionCounter < 3 ? (questionCounter++,
            generateQuestions(),
            counter = 30,
            timerWrapper()) :
            (finalScreen())
    }; 

    function timerWrapper() {
        theClock = setInterval(thirtySeconds, 1000);
        function thirtySeconds() {
            if (counter === 0) {
                clearInterval(theClock);
                timeoutLoss();
            }
            if (counter > 0) {
                counter--;
            }
            $(".timer").html(counter);
        }
    }

    function resetGame() {
        questionCounter = 0;
        correctTally = 0;
        incorrectTally = 0;
        unansweredTally = 0;
        counter = 30;
        generateQuestions();
        timerWrapper();
    }

    var openScreen;
    var gameHTML;
    var counter = 30;
    var questionArray = 
        [ "aaaa? ",
        "bbb?", 
        "ccc?",];
    var answerArray = [
        ["1", "2", "3", "4"], 
        ["1", "2", "3", "4"], 
        ["1", "2", "3", "4"], 

    var correctAnswers = 
        [ "1", 
        "1", 
        "3"  ];
    var questionCounter = 0;
    var selecterAnswer;
    var theClock;
    var correctTally = 0;
    var incorrectTally = 0;
    var unansweredTally = 0;

Answer 1

您可以为计数器添加另一个数组：

var counterArray = [ 30, 50, 30 ];

然后替换

counter = 30

与

counter = counterArray[questionCounter]

在线测验，需要不同的计时器

1 个答案: