JS控制学历值显示不同图片，达到20分显示图片b，达到50分显示图片c
<html>
<head>
<title>作业大战</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<body style="text-align: center;">
<div id="scoreContainer" style="text-align: center;">
<h1><font color="#FF2800">学</font><font color="#FF5000">历</font><font color="#FF7800">值</font>：<span id="currentScore">0</span></h1>
</div>
<div id="questionContainer">
<p><font color="#FF0094">请</font><font color="#FF1380">根</font><font color="#FF006C">据</font><font color="#FF1359">下</font><font color="#FF0045">图</font><font color="#FF1331">题</font><font color="#FF001E">目</font><font color="#FF130A">给</font><font color="#FF0000">出</font><font color="#FF1313">正</font><font color="#FF0000">确</font><font color="#FF1313">答</font><font color="#FF0000">案</font>：</p>
<div id="imageContainer" style="display: center;">
<img id="questionImage" src="" alt="">
</div>
<input type="text" id="userAnswer" placeholder="请输入内容">
<button id="submitAnswer">提交</button>
<p id="result"></p>
</div>
<audio id="correctSound">
<source src="+2.mp3" type="audio/mpeg">
</audio>
<audio id="wrongSound">
<source src="-1.mp3" type="audio/mpeg">
</audio>
<script type="text/javascript">
var images = [
{ 'image': '1.jpg', 'answer': 'aaa' },
{ 'image': '3.jpg', 'answer': '333' },
{ 'image': '4.jpg', 'answer': '444' },
{ 'image': '5.jpg', 'answer': '555' },
{ 'image': '6.jpg', 'answer': '666' },
{ 'image': '7.jpg', 'answer': '777' },
{ 'image': '2.jpg', 'answer': 'bbb' }
];
var score = 0;
var currentIndex = 0;
function showQuestion() {
var imageUrl = "";
if (score >= 50) {
imageUrl = "c.jpg";
} else if (score >= 20) {
imageUrl = "b.jpg";
} else {
imageUrl = "a.jpg";
}
document.getElementById("educationImage").src = imageUrl;
var questionImageUrl = images[currentIndex].image;
document.getElementById("questionImage").src = questionImageUrl;
}
function checkAnswer() {
var userAnswer = document.getElementById("userAnswer").value.trim();
var correctAnswer = images[currentIndex].answer;
if (userAnswer === correctAnswer) {
document.getElementById("result").textContent = "回答正确！得分 +2";
score += 2;
document.getElementById("currentScore").textContent = score;
document.getElementById("correctSound").play();
if (score >= 80 && !hasShownCongratulation) { //如果学历值大于等于80且未弹出过恭喜提示框
alert("恭喜您，您的学历值已达到80分以上！再接再厉，加油！加80"); //弹出提示框
score += 80; //学历值增加80分
hasShownCongratulation = true; // 设置已经弹出过恭喜提示框
}
} else {
document.getElementById("result").textContent = "回答错误！得分 -1";
score -= 1;
document.getElementById("currentScore").textContent = score;
document.getElementById("wrongSound").play();
}
currentIndex++;
if (currentIndex >= images.length) {
alert("所有题目已经做完，本次游戏结束！");
currentIndex = 0;
score = 0;
// 跳转到指定页面
location.href = "2.html";
}
showQuestion();
document.getElementById("userAnswer").value = "";
}
$(document).ready(function() {
showQuestion();
$("#submitAnswer").click(function() {
checkAnswer();
});
// 使用回车键提交答案
$("#userAnswer").on('keypress', function(e) {
if (e.which === 13) {
checkAnswer();
}
});
});
</script>
</body>
</html>
<p>在代码中，可以添加一个新的img标签，用于显示图片a、b、c。然后根据学历值的不同，设置不同的图片路径。</p>
<p>首先，在html中添加一个新的img标签，如下所示：</p>
<pre><code class="language-html"><img id="educationImage" src="" alt="">
</code></pre>
<p>然后，在showQuestion函数中根据学历值的不同，设置不同的图片路径，如下所示：</p>
<pre><code class="language-javascript">function showQuestion() {
var imageUrl = "";
if (score >= 50) {
imageUrl = "c.jpg";
} else if (score >= 20) {
imageUrl = "b.jpg";
} else {
imageUrl = "a.jpg";
}
document.getElementById("educationImage").src = imageUrl;
var questionImageUrl = images[currentIndex].image;
document.getElementById("questionImage").src = questionImageUrl;
}
</code></pre>
<p>注意：需要提前将图片a、b、c准备好，并将其命名为a.jpg、b.jpg、c.jpg，放置在与html文件相同的目录下。</p>
<p>这样就可以根据学历值的不同，显示不同的图片了。</p>
原文地址: https://www.cveoy.top/t/topic/o8RH 著作权归作者所有。请勿转载和采集!