Как сделать так, чтобы мое затухание работало и использовало ожидание или паузу в моем файле? - PullRequest
Новая
       1

Как сделать так, чтобы мое затухание работало и использовало ожидание или паузу в моем файле?

0 голосов
/ 12 марта 2020

Я чрезвычайно новичок в кодировании и у меня есть проект. Я решил использовать примитивный способ делать вещи, поскольку я еще не продвинулся. Я пытаюсь заставить мои вопросы исчезать из DOM, ждать 1,5 секунды, прежде чем следующий вопрос исчезает.

Теперь часть Fade out работает в консоли, но останавливается там, но не работает в моем реальном файле, и я не придумал, как добавить ожидание перед использованием Fade In.

Я думаю, что правильно подключил свой файл JS, но он не будет работать и с готовыми занятиями в классе. Заранее спасибо 

// Timer function stuff
window.onload = function() {
  function getFormattedMinutes() {
    var secondsLeft = totalSeconds - secondsElapsed;
    var minutesLeft = Math.floor(secondsLeft / 60);
    var formattedMinutes; {
      formattedMinutes = "0" + minutesLeft;
    }
    return formattedMinutes;
  }

  function getFormattedSeconds() {
    var secondsLeft = (totalSeconds - secondsElapsed) % 60;
    var formattedSeconds;
    if (secondsLeft < 10) {
      formattedSeconds = "0" + secondsLeft;
    } else {
      formattedSeconds = secondsLeft;
    }
    return formattedSeconds;
  }

  function renderTime() {
    timerText.textContent = "Time Remaining: " + getFormattedMinutes() + " : " + getFormattedSeconds();
    if (secondsElapsed >= totalSeconds) {
      clearInterval(timer);
      alert("Time is up!");
    }
  }

  function stopTimer() {
    secondsElapsed = 0;
    renderTime();
  }

  function startTimer() {
    if (totalSeconds > 0) {
      secondsElapsed = 0;
      timer = setInterval(function() {
        secondsElapsed++;
        renderTime();
      }, 1000);
    }
    renderTime();
  }
};
// window open it calls function 

// get element with id of Questions


// Global variables stuff
// a = document.getElementById("A"),
// b = document.getElementById("B"),
// c = document.getElementById("C"),
// d = document.getElementById("D"),
// answers = q.answers;


// Questions Object
var Quests = [{
  Q1: {
    Question: "What is BootStrap?",
    answers: ["A piece of material that helps hold up your boot", "An open source Css framework", "An open source JS framework"],
    answersCorrect: [1]

  },

  Q2: {
    Question: "HTML is to Skeleton as Javascript is to...?",
    answers: ["Muscles", "Skin", "Coffee"],
    answersCorrect: [0]
  },

  Q3: {
    Question: "What is BootStrap?",
    answers: ["A piece of material that helps hold up your boot", "An open source Css framework", "An open source JS framework"],
    answersCorrect: [3]
  },

  Q4: {
    Question: "What is BootStrap?",
    answers: ["A piece of material that helps hold up your boot", "An open source Css framework", "An open source JS framework"],
    answersCorrect: [2]
  }
}];


// -->Get faded code<--
var removeq1 = $(this).remove();
$(".button").on("click", function() {
      $("#questionBoxOne").fadeOut(1000, function() {
        $(this).remove();
      })
    }

    // $("#questionBoxTwo").fadeIn(1000,function())

    // fade in after (this).remove has been completed


    $(".button").on("click", function() {
        $("#questionBoxTwo").fadeOut(1000, function() {
          $(this).remove();
        })
      }
body {
  margin: auto;
  text-align: center;
}

.flex-container {
  display: flex;
  height: 500px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: flex;
}

header {
  font-family: "Righteous", cursive;
  font-size: xx-large;
  font-weight: bolder;
}

#secLeft {
  position: absolute;
  top: 0.1%;
  display: block;
}

#questionBoxOne {
  position: absolute;
}

#questionBoxTwo {
  position: absolute;
}

#questionBoxThree {
  position: absolute;
}

#questionBoxFour {
  position: absolute;
}

.questionDiv {
  font-size: 25px;
  font-weight: bold;
}

.button {
  background-color: rgb(22, 184, 187);
  padding: 20px;
  border-radius: 12px;
  border: none;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20PX;
}
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- font family -->
  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
  <!-- JQ -->
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="DevOpsFiles/Java.js"></script>
  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <!-- Myfiles -->
  <link rel="stylesheet" type="text/css" href="DevOpsFiles/Style.css">
  <title>Quiz it</title>
</head>

<header>Who's been paying attention in BootCamp?</header>

<!-- Quiz Design -->

<body nload="startTime()" class="displayTime">
  <div id="myTime"> </div>

  <Div class="flex-container">
    <div id="questionBoxOne" class="row" style="display: block;">
      <div id="questionA" class="col-md-6 col-sm-3 questionDiv">
        "What is BootStrap?"
        <div class="row">

          <div class="col-8 col-sm-6 answer">
            <button id="B" type="button" class="button">"A piece of material that helps hold up your
                            boot"
                        </button>

            <div class="col-8 col-sm-6 answer">
              <button id="C" type="button" class="button correct">"An open source Css
                                framework"</button>

              <div class="col-8 col-sm-6 answer">
                <button id="D" type="button" class="button">"An open source Js framework"</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div id="questionBoxTwo" class="row" style="display: none;">
      <div id="questionB" class="col-md-6 col-sm-3 questionDiv">
        "What is BootStrap?"
        <div class="row">

          <div class="col-8 col-sm-6 answer">
            <button id="B" type="button" class="button">"A piece of material that helps hold up your
                            boot" </button>

            <div class="col-8 col-sm-6 answer">
              <button id="C" type="button" class="button">"An open source Css framework"</button>

              <div class="col-8 col-sm-6 answer">
                <button id="D" type="button" class="button correct">"An open source Js
                                    framework"</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="questionBoxThree" class="row" style="display: none;">
      <div id="questionC" class="col-md-6 col-sm-3 questionDiv">
        "What is BootStrap?"
        <div class="row">

          <div class="col-8 col-sm-6 answer">
            <button id="B" type="button" class="button">"A piece of material that helps hold up
                            your boot" </button>

            <div class="col-8 col-sm-6 answer">
              <button id="C" type="button" class="button correct"> "An open source Css
                                framework"</button>

              <div class="col-8 col-sm-6 answer">
                <button id="D" type="button" class="button">"An open source Js
                                        framework"</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="questionBoxFour" class="row" style="display: none;">
      <div id="questionD" class="col-md-6 col-sm-3 questionDiv">
        "What is BootStrap?"
        <div class="row">

          <div class="col-8 col-sm-6 answer">
            <button id="B" type="button" class="button correct">"A piece of material that helps hold
                            up your boot" </button>

            <div class="col-8 col-sm-6 answer">
              <button id="C" type="button" class="button">"An open source Css
                                framework"</button>

              <div class="col-8 col-sm-6 answer">
                <button id="D" type="button" class="button">"An open source Js
                                    framework"</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...