Question

我有一个简单的javascript测验，其中包含一个按百分比计算测验的按钮。

每当在测验结束时按下按钮时，它将显示结果，但我也希望它加载图片。图片是LVL栏，根据你得到的分数显示你是哪个LVL。

<script language="JavaScript">


// Insert number of questions
var numQues = 20;

// Insert number of choices in each question
var numChoi = 4;

// Insert number of questions displayed in answer area
var answers = new Array(20);

// Insert answers to questions
answers[0] = "Cascading Style Sheets";
answers[1] = "Dynamic HTML";
answers[2] = "Netscape";
answers[3] = "Common Gateway Interface";
answers[4] = "Common Gateway Interface";
answers[5] = "Common Gateway Interface";
answers[6] = "Common Gateway Interface";
answers[7] = "Common Gateway Interface";
answers[8] = "Common Gateway Interface";
answers[9] = "Common Gateway Interface";
answers[10] = "Common Gateway Interface";
answers[11] = "Common Gateway Interface";
answers[12] = "Common Gateway Interface";
answers[13] = "Common Gateway Interface";
answers[14] = "Common Gateway Interface";
answers[15] = "Common Gateway Interface";
answers[16] = "Common Gateway Interface";
answers[17] = "Common Gateway Interface";
answers[18] = "Common Gateway Interface";
answers[19] = "Common Gateway Interface";

function getScore(form) {
  var score = 0;
  var currElt;
  var currSelection;
  for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    for (j=0; j<numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        if (currSelection.value == answers[i]) {
          score++;
          break;
        }
      }
    }
  }
  score = Math.round(score/numQues*100);
  form.percentage.value = score + "%";
  var correctAnswers = "";
  for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
  }
  form.solutions.value = correctAnswers;

}

</script>

<body>
<div class="container">




    <div class="header"><img src="banner.png" height="250" /></div>

      <div class="navbartop">  
            <a href="Home.html" style="text-decoration:none">Home</a> |
            <a href="Games.html" style="text-decoration:none">Games</a> |
            <a href="#" style="text-decoration:none">Videotutorials &nbsp;</a>    
        </div>

网页设计测验

    <form class="Quiz">
    <p>Quiz</p>

   1. What does CSS stand for? 
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
      <li><input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
      <li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
      <li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>

    </ul>
   <br /> 
    2. What does DHTML stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q2" value="Dramatic HTML">Dramatic HTML</li>
      <li><input type="radio" name="q2" value="Design HTML">Design HTML</li>
      <li><input type="radio" name="q2" value="Dynamic HTML">Dynamic HTML</li>
      <li><input type="radio" name="q2" value="Computer Style Symbols">Computer Style Symbols</li>
    </ul>
    <br />

    3. Who created Javascript?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q3" value="Microsoft">Microsoft</li>
      <li><input type="radio" name="q3" value="Netscape">Netscape</li>
      <li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
      <li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>         
    </ul>
    <br />
    4. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q4" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>        
    </ul>
    <br />
     5. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q5" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q5" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q5" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q5" value="Common Gateway Interface">Common Gateway Interface</li>        
    </ul>
    <br />
     6. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q6" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q6" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q6" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q6" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
     7. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q7" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q7" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q7" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q7" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
     8. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q8" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q8" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q8" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q8" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
     9. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q9" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q9" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q9" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q9" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
    <input type="button" value="Get score" onClick="getScore(this.form)">
    <input type="reset" value="Clear answers">
    <p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
   <!-- Correct answers:<br>
    <textarea class="bgclr" name="solutions" wrap="virtual" rows="5" cols="30" disabled>
    </textarea>
   !-->
    </form>

    <br /> 
    <div class="LVL bar">
    <img src="LVLbar.png" />
    </div>
                <footer>
                    <img src="footer.png" class="footer" />
                </footer>     
      </div>
</body>

Answer 1

getScore函数中的某个地方

$('.lvl-bar img').attr('src', 'your-picture-name-here.png');
$('.lvl-bar').show();

Answer 2

如果您不使用jQuery，那么您应该坚持使用标准JavaScript。在getScore函数的末尾执行以下操作：

  document.querySelector('.LVL img').src = 'new-image-url.png';

您还可以考虑在图片中添加ID，这样您就可以使用适用于旧浏览器的document.getElementById()。

在javascript中按下按钮时加载图像

网页设计测验

2 个答案: