JS代码实现积分显示不同图片：0-10分显示00.jpg，10-50分显示11.jpg
<html>
<head>
<title>作业大战</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var score = 0;
var imageUrl = "";
<pre><code>function updateImage() {
if (score > 0 && score < 10) {
imageUrl = "00.jpg";
} else if (score >= 10 && score < 50) {
imageUrl = "11.jpg";
} else {
// 默认显示的图片
imageUrl = "default.jpg";
}
document.getElementById("questionImage").src = imageUrl;
}
</code></pre>
</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="#FF2800">请</font><font color="#FF5000">帮</font><font color="#FF7800">我</font><font color="#FFA000">解</font><font color="#FFC800">决</font><font color="#FFF000">下</font><font color="#D7FF00">图</font><font color="#AFFF00">难</font><font color="#87FF00">题</font> <font color="#5FFF00">输</font><font color="#37FF00">入</font><font color="#0FFF00">正</font><font color="#00FF28">确</font><font color="#00FF50">答</font><font color="#00FF78">案</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 = images[currentIndex].image;
document.getElementById("questionImage").src = imageUrl;
updateImage(); // 添加这行代码
}
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>
原文地址: https://www.cveoy.top/t/topic/o8Re 著作权归作者所有。请勿转载和采集!