个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 13:45:51 25 4
gpt4 key购买 nike

我有一个简单的 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>

最佳答案

getScore 函数中的某处

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

关于javascript - 在javascript中按下按钮时加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22518293/

25 4 0
文章推荐： javascript - 如何一次只选中一个复选框？
文章推荐： c++ - CString 到 char*
文章推荐： java - 单击按钮时 Servlet 到 jsp - 错误是什么？
文章推荐： javascript - SpiderMonkey 编译错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com