【娱乐项目】竖式算术器

Demo介绍

一个加减法随机数生成器，它能够生成随机的加减法题目，并且支持用户输入答案。系统会根据用户输入的答案判断是否正确，统计正确和错误的次数，并显示历史记录和错题记录。该工具适合用于数学练习，尤其适合练习基本的加减法运算。

JavaScript 代码

变量初始化

correctCount 和 wrongCount：用于存储用户答对和答错的次数
randomNum：控制生成的随机数的范围，默认是 20
previousEquations：存储用户回答的所有算式
correctEquations 和 wrongEquations：分别记录答对和答错的算式
showWrongRecords 控制是否显示错题记录

核心功能

**编辑功能：**点击“修改”按钮可以编辑 randomNum，即加减法题目的最大值范围。修改后，点击“确定”会禁用输入框
**计时功能：**通过 setInterval 每秒更新一次计时器，显示自页面加载以来的耗时

随机数生成和算式生成：

generateRandomNumber()：生成 1 到 randomNum 之间的随机整数
generateRandomOperation()：以 50% 概率生成“加法”或“减法”
generateRandomEquation()：根据生成的两个随机数和运算符构建一个加减法算式。如果是加法且结果大于 randomNum，则改为减法；如果是减法且第一个数小于第二个数，则交换两个数的顺序。

答案判断：

checkAnswer()：监听用户输入，按回车键后检查用户输入的答案是否正确。若正确，增加正确次数并将算式添加到正确记录中；若错误，增加错误次数并将算式添加到错误记录中
eval() 用于计算生成的算式的结果

更新和显示题目：

每次用户回答正确后，调用 generateNewEquation() 函数生成一个新的随机算式
显示题目：equation 显示算式，equation2 显示带等号的算式，showRes 显示算式的树形结构（即数字在上下排布的样式，帮助用户理解运算顺序）

历史记录：

使用 previousEquations 存储所有的算式和对应的答案，历史记录可以按顺序显示
通过点击“切换记录”按钮，可以切换查看错题记录（错误的算式）和历史记录（包括正确和错误的算式）

统计功能：
页面右侧显示正确回答次数和错误回答次数

键盘事件监听：
使用 document.addEventListener(‘keypress’, checkAnswer) 来监听用户的输入，并在用户按下回车键时进行答案检查

交互流程

页面加载时，默认生成一个加减法算式，并显示在页面中
用户在输入框中输入答案并按下回车键

如果答案正确，显示“回答正确”，并生成一个新的算式
如果答案错误，显示“回答错误”

用户可以通过点击“切换记录”按钮查看历史记录或错题记录
用户点击“修改”按钮时，可以修改加减法题目的最大数值（默认为20）
页面会不断更新统计信息，显示正确和错误的次数

完整代码

<!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">
                <!-- 显示最大随机数的输入框，默认20 -->
                <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;

        // 初始最大随机数范围为20
        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);


        // 生成1到randomNum之间的随机数
        function generateRandomNumber() {
            return Math.floor(Math.random() * randomNum) + 1; // 生成1到randomNum之间的随机数
        }

        // 随机生成加法或减法
        function generateRandomOperation() {
            return Math.random() < 0.5 ? '+' : '-'; // 以50%的概率生成加减法
        }

        // 生成随机算式
        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); // 使用eval计算算式的结果

                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>