代码如下
<!DOCTYPE html>
<html>
<head>
<title>算数闯关游戏</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
}
.container {
text-align: center;
margin-top: 100px;
}
.btn {
background-color: green;
color: white;
padding: 10px 20px;
font-size: 18px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>计算题APP</h2>
<p>请回答以下题目：</p>
<p id="question"></p>
<input type="number" id="answer" placeholder="请输入答案">
<button class="btn" οnclick="checkAnswer()">提交答案</button>
<p id="score">得分: 0</p>
</div>
<script>
var score = 0;
function generateQuestion() {
var num1 = Math.floor(Math.random() * 100);
var num2 = Math.floor(Math.random() * 100);
var operator = Math.floor(Math.random() * 4);
var questionString = "";
switch (operator) {
case 0:
questionString = num1 + " + " + num2;
break;
case 1:
questionString = num1 + " - " + num2;
break;
case 2:
questionString = num1 + " * " + num2;
break;
case 3:
questionString = num1 + " / " + num2;
break;
}
document.getElementById("question").innerHTML = questionString;
}
function checkAnswer() {
var userAnswer = parseInt(document.getElementById("answer").value);
var question = document.getElementById("question").innerHTML;
var correctAnswer = eval(question);
if (userAnswer === correctAnswer) {
score += 1;
} else {
score -= 2;
}
document.getElementById("score").innerHTML = "得分: " + score;
document.getElementById("answer").value = "";
generateQuestion();
}
generateQuestion();
</script>
</body>
</html>
4369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
