<p>下面是一份使用 HTML、CSS 和 JavaScript 实现四则运算游戏的代码示例：</p>
<p>```
<!DOCTYPE html></p>
<html>
<head>
<meta charset="UTF-8">
<title>四则运算游戏</title>
<style>
/* 这里写 CSS 样式 */
#game {
width: 500px;
margin: 0 auto;
text-align: center;
}
#question {
font-size: 20px;
margin-top: 50px;
}
#answer {
margin-top: 20px;
}
#result {
margin-top: 20px;
color: green;
}
</style>
</head>
<body>
<div id="game">
<div id="question">
<p id="firstNumber"></p>
<p id="operator"></p>
<p id="secondNumber"></p>
<p>=</p>
</div>
<div id="answer">
<input type="text" id="inputAnswer">
<button id="submit">提交</button>
</div>
<div id="result"></div>
</div>
<script>
// 这里写 JavaScript 代码
const firstNumber = document.getElementById("firstNumber");
const operator = document.getElementById("operator");
const secondNumber = document.getElementById("secondNumber");
const inputAnswer = document.getElementById("inputAnswer");
const submit = document.getElementById("submit");
const result = document.getElementById("result");
<pre><code> // 随机生成数字和运算符
function generate() {
firstNumber.textContent = Math.floor(Math.random() * 100);
secondNumber.textContent = Math.floor(Math.random() * 100);
const operators = ["+", "-", "×", "÷"];
operator.textContent = operators[Math.floor(Math.random() * 4)];
}
// 检查答案是否正确
function checkAnswer() {
const a = parseInt(firstNumber.textContent);
const b = parseInt(secondNumber.textContent);
const op = operator.textContent;
let c;
switch (op) {
case "+":
c = a + b;
break;
case "-":
c = a - b;
break;
case "×":
c = a * b;
break;
case "÷":
c = a / b;
break;
}
if (inputAnswer.value == c) {
result.textContent = "正确！";
} else {
result
</code></pre>
来一个四则运算游戏的网站代码
最新推荐文章于 2024-07-11 17:36:21 发布
83
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
