.shift() 显示 5 条消息 - 用于移动到下一条消息的按钮答案

【问题标题】：5 messages appear with .shift() - button to move to next message.shift() 显示 5 条消息 - 用于移动到下一条消息的按钮
【发布时间】：2016-06-17 07:53:05
【问题描述】：

如你所见，我是 javascript 方面的菜鸟。

我正在为学生创建一个实习面试。我想要实现的是 5 个面试问题一个接一个出现（每个 3 分钟），在第 5 个问题的末尾重定向页面。

还有一个循环播放的视频，倒计时 3 分钟。

我正在尝试添加一个按钮，使用户能够转到下一个问题，这也会重置视频计时器。

任何帮助将不胜感激！

     <!DOCTYPE html>
     <html>
     <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" type="text/css" href="css/fonts.css"/>
     <link rel="stylesheet" href="../css/stylesheet.css">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     </head>
     <body>
     <div id="wrapper"> 
     <header>
      <img src="../images/banner.jpg">   
     </header>
     <div id="jobInterview">
      <h1>Allied Health Assistant Job Interview</h1>
      <img src="../images/panelinterview.jpeg" alt="interview panel">

      <h2>Answer the questions provided</h2>
      <p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>
      <h2 id="message"></h2>
      <video id="myVideo" width="160" height="120" autoplay loop>
        <source src="../videos/timer.mp4" type="video/mp4" >
        Your browser does not support the video tag.
      </video>
      <script>
      var questions = [
            "Question 1 <br>  What interests you about this job?",
            "Question 2  <br>What new skills are you looking to develop as an allied health assistant? ",
            "Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
            "Question 4  <br>What is your greatest strength?",
            "Question 5  <br>What are you passionate about? "
        ];

      var vid = document.getElementById("myVideo");

      $( document ).ready(function() {

        function showQuestion() {
        if (questions.length == 0) {
          window.location.replace("../finish.html");
        } 
        else {
                      $('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);        
        }
      }

      });

      function nextQuestion() {
      $('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);
      vid.currentTime=0;
     }

        </script>
        <button id="next-question" onClick="nextQuestion()">Next Question</button>
           </div>   
          </div><!-----CLOSE WRAPPER DIV------>  
        </body>
       </html>

【问题讨论】：

标签： fadein shift

【解决方案1】：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Choose your own career adventure</title>
        <link rel="stylesheet" href="../../css/normalize.css">
    <link rel="stylesheet" href="../../css/stylesheet.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </head>
  <body>
  <div id="wrapper"> 
    <header id="theheaderhasissues">
      <img src="../../images/banner.jpg">   
        </header>
    <div id="jobInterview-no-recording">
      <h2>Allied Health Assistant Job Interview</h2>
      <img src="../../images/panelinterview.jpg" alt="interview panel">

      <!--<h3>Answer the questions provided</h3>
      <p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>-->
      <h2 id="timer">Timer</h2>
      <video id="myVideo" width="160" height="120" autoplay>
        <source src="../../videos/timer.mp4" type="video/mp4" >
        Your browser does not support the video tag.
      </video>
      <blockquote class="triangle-isosceles">
      <h3 id="message"></h3>
      </blockquote>

      <script>

       var questions = [
            "Question 1 <br>  What interests you about this job?",
            "Question 2  <br>What new skills are you looking to develop as an allied health assistant? ",
            "Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
            "Question 4  <br>What is your greatest strength?",
            "Question 5  <br>What are you passionate about? "
        ];
        $('#message').hide();
        showQuestion();

        function showQuestion() {
        var vid = document.getElementById("myVideo");
        if (questions.length == 0) {
        window.location.replace("../../finish.html");
        } 
        else {
        vid.currentTime=0;
        vid.play();
        $('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, showQuestion);

        }
     }

      function nextQuestion() {
      var vid = document.getElementById("myVideo");
      if (questions.length == 0) {
        window.location.replace("../../finish.html");
        } 

      else {  
      vid.currentTime=0;
      vid.play();
      $('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, nextQuestion);

     }
   }

    function reload() {

      location.reload();
    }

      </script>
    <ul id="buttons">
      <li><button onclick="reload()">Start Again</button></li>
      <li><a href="../../finish.html" id="finish">Finish</a></li>
      <li><button id="next-question" onclick="nextQuestion()">Next Question</button></li>
    </ul>
    </div><!--CLOSE SETTINGS NAVIGATION DIV-->  

        <footer>
      <ul>
        <li><a href="javascript:history.back()"><img src="../../images/left-arrow.png"></li>
        <li><a href="../../index.html"><img src="../../images/home-button.png"></li>

        </ul> 
       <br>
      <br>
      <p>© Can Stock Photo Inc. / goldenKB , http://www.canstockphoto.com/job-interview-26160264.html</p>
    </footer>
        </div><!-----CLOSE WRAPPER DIV------>  
  </body>
</html>

【讨论】：