Demo介绍
JavaScript 代码
- 变量初始化
- 核心功能
交互流程
完整代码
<!DOCTYPE html>
<html>
<head>
<title>加减法随机数生成器</title>
<style>
body {
margin: 0;
}
.calculate {
height: 97vh;
overflow: scroll;
text-align: center;
border: 8px groove #fff;
}
html::-webkit-scrollbar,
.calculate::-webkit-scrollbar {
width: 0;
height: 0;
}
.calculate .top {
position: relative;
}
.calculate .title {
height: 40px;
line-height: 40px;
font-size: 32px;
font-weight: bold;
text-align: center;
}
.calculate .title input {
width: 50px;
height: 100%;
text-align: center;
font-size: 32px;
font-weight: bold;
border: none;
}
.calculate .top .btn {
position: absolute;
top: 5px;
right: 10px;
display: flex;
justify-content: space-around;
}
.calculate .top .btn div {
width: 100px;
background: #7bcafc;
color: #fff;
border-radius: 20px;
height: 35px;
line-height: 35px;
cursor: pointer;
margin-left: 10px;
}
.calculate #container {
display: flex;
justify-content: space-around;
background: rgb(241, 245, 251);
height: 80%;
margin: 0 auto;
border-radius: 8px;
}
.calculate #container .title {
background: #fff;
border-radius: 20px;
width: 50%;
margin: 10px auto;
height: 40px;
line-height: 40px;
}
#timer {
width: 100%;
text-align: center;
font-size: 20px;
}
#equation {
font-size: 40px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
display: none;
}
#equation2 {
font-size: 40px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
display: none;
}
.tree {
font-size: 40px;
font-weight: bold;
}
.tree p {
line-height: 0;
text-align: right;
}
.tree .fuhao {
text-align: left;
}
.line {
width: 100%;
height: 3px;
background: #000;
}
#answer {
font-size: 24px;
width: 200px;
padding: 10px;
margin-bottom: 20px;
}
#result {
font-size: 30px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
color: red;
}
.correct {
color: green;
}
.wrong {
color: red;
}
#statistics {
margin-top: 20px;
text-align: center;
}
#previousEquations {
height: 88%;
overflow: scroll;
overflow-y: scroll;
font-size: 20px;
line-height: 1.5;
column-count: 4;
column-gap: 10px;
text-align: right;
}
.equation-row {
display: flex;
justify-content: flex-start;
margin-bottom: 10px;
}
.equation-item {
display: inline-block;
width: 125px;
text-align: center;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="calculate">
<div class="top">
<div class="title">
<input value="20" readonly />
内加减法随机数生成器
</div>
<div class="btn">
<div id="toggleRecordsBtn">切换记录</div>
<div id="edit">修改</div>
</div>
<div>
<p id="timer">耗时:0秒</p>
</div>
</div>
<div id="container">
<div style="width: 40%;">
<h2 class="title" style="width: 70%;">随机算术</h2>
<div style="width: 20%; margin-left: 40%">
<p id="equation"></p>
<p id="equation2"></p>
<p id="showRes"></p>
<p class="line"></p>
</div>
<input type="text" id="answer" placeholder="请输入答案" autocomplete="off">
<p id="result"></p>
<div id="statistics">
<p id="correctCount">回答正确次数:0</p>
<p id="wrongCount">回答错误次数:30</p>
</div>
</div>
<div style="width: 60%;">
<h2 class="title" id="historyTitle">历史结果</h2>
<div id="previousEquations"></div>
</div>
</div>
</div>
<script>
var correctCount = 0;
var wrongCount = 30;
var randomNum = 20;
var previousEquations = [];
var correctEquations = [];
var wrongEquations = [];
var showWrongRecords = false;
var startTime = new Date().getTime();
var timerElement = document.getElementById('timer');
const edit = document.querySelector('#edit');
const input = document.querySelector('.title input');
edit.addEventListener('click', () => {
if (edit.textContent == '修改') {
input.readOnly = false;
input.focus();
edit.textContent = '确定'
} else {
input.readOnly = true;
input.blur();
const value = input.value;
edit.textContent = '修改'
input.style.border = 'none';
randomNum = value;
}
});
function updateElapsedTime() {
var currentTime = new Date().getTime();
var elapsedTime = Math.floor((currentTime - startTime) / 1000);
if (elapsedTime >= 60) {
var minutes = Math.floor(elapsedTime / 60);
var seconds = elapsedTime % 60;
timerElement.textContent = '耗时:' + minutes + '分' + seconds + '秒';
} else {
timerElement.textContent = '耗时:' + elapsedTime + '秒';
}
}
setInterval(updateElapsedTime, 1000);
function generateRandomNumber() {
return Math.floor(Math.random() * randomNum) + 1;
}
function generateRandomOperation() {
return Math.random() < 0.5 ? '+' : '-';
}
function generateRandomEquation() {
var number1 = generateRandomNumber();
var number2 = generateRandomNumber();
var operation = generateRandomOperation();
if (operation === '+' && number1 + number2 > randomNum) {
operation = '-';
}
if (operation === '-' && number1 < number2) {
var temp = number1;
number1 = number2;
number2 = temp;
}
let res = number1 + ' ' + operation + ' ' + number2;
let show = '<div class="tree"><p>' + number1 + '</p><p class="fuhao">' + operation + '</p><p>' + number2 + '</p></div>';
let obj = {
res,
show
};
return obj;
}
function checkAnswer(event) {
if (event.keyCode === 13) {
var userInput = document.getElementById('answer').value;
var equation = document.getElementById('equation').textContent;
var result = eval(equation);
if (userInput == "") {
return;
}
var isCorrect = parseInt(userInput) === result;
if (isCorrect) {
correctCount++;
previousEquations.push('<span class="equation-item correct">' + equation + ' = ' + userInput + ' √</span>');
correctEquations.push('<span class="equation-item correct">' + equation + ' = ' + userInput + ' √</span>');
document.getElementById('result').textContent = '回答正确!';
} else {
wrongCount++;
previousEquations.push('<span class="equation-item wrong">' + equation + ' = ' + userInput + ' ×</span>');
let equationItem = '<span class="equation-item wrong">' + equation + ' = </span>';
if (!wrongEquations.includes(equationItem)) {
wrongEquations.push(equationItem);
}
document.getElementById('result').textContent = '回答错误!';
}
document.getElementById('correctCount').textContent = '回答正确次数:' + correctCount;
document.getElementById('wrongCount').textContent = '回答错误次数:' + wrongCount;
document.getElementById('previousEquations').innerHTML = previousEquations.join('');
if (isCorrect) {
generateNewEquation();
}
document.getElementById('answer').value = '';
document.getElementById('answer').focus();
showWrongRecords = false;
showHistory();
}
}
function generateNewEquation() {
document.getElementById('answer').value = '';
document.getElementById('result').textContent = '';
var equation;
var show;
var result;
do {
let fun = generateRandomEquation();
equation = fun.res;
show = fun.show;
result = eval(equation);
} while (result < 0);
document.getElementById('equation').textContent = equation;
document.getElementById('equation2').textContent = equation + " = ";
document.getElementById('showRes').innerHTML = show;
}
function showHistory() {
var historyTitle = document.getElementById('historyTitle');
var previousBox = document.getElementById('previousEquations');
if (showWrongRecords) {
historyTitle.textContent = '错题记录';
previousBox.innerHTML = wrongEquations.join('');
} else {
historyTitle.textContent = '历史记录';
previousBox.innerHTML = previousEquations.join('');
}
}
function toggleRecords() {
showWrongRecords = !showWrongRecords;
showHistory();
}
document.addEventListener('keypress', checkAnswer);
generateNewEquation();
document.getElementById('answer').focus();
var toggleRecordsBtn = document.getElementById('toggleRecordsBtn');
toggleRecordsBtn.addEventListener('click', toggleRecords);
</script>
</body>
</html>
