如何在Javascript中生成随机数字、运算符并计算结果实现数学闪卡功能

修正后的可运行代码及修改说明 #

修改点： #

• 修复了获取num2元素时的语法错误，将误用的减号改为等号
• 将随机运算符选取、结果计算逻辑移入New函数内部，确保每次点击按钮都会刷新内容
• 新增运算符展示、结果计算和赋值的逻辑，同时添加了控制台打印的代码，符合需求
• 调整了页面标签结构，把标题移入body内部，符合HTML规范

完整代码： #

<!DOCTYPE html> 
<html> 
<head>
    <title>MATH FLASHCARD 1.0</title>
    <link rel="stylesheet" href="style.css"> 
    <script>
        var operators = [{
            sign: "+",
            method: function(num1,num2){ return num1 + num2; }
        },{
            sign: "-",
            method: function(num1,num2){ return num1 - num2; }
        }];

        function New() {
            // 获取DOM元素
            const num1 = document.getElementById("num1");
            const num2 = document.getElementById("num2");
            const operatorEl = document.getElementById("operators");
            const answerEl = document.getElementById("answer");
            
            // 生成1-10的随机整数
            const rnum1 = Math.floor((Math.random()*10)+1);
            const rnum2 = Math.floor((Math.random()*10)+1);
            // 随机选取运算符
            const selectedOperator = operators[Math.floor(Math.random()*operators.length)];
            // 计算运算结果
            const result = selectedOperator.method(rnum1, rnum2);
            
            // 内容渲染到页面
            num1.innerHTML = rnum1;
            num2.innerHTML = rnum2;
            operatorEl.innerHTML = selectedOperator.sign;
            answerEl.innerHTML = result;
            // 控制台打印所需内容
            console.log(`随机数1：${rnum1}，随机数2：${rnum2}，运算符：${selectedOperator.sign}，运算结果：${result}`);
        }
    </script>
</head> 
<body> 
    <h2>MATH FLASHCARDS V1.0</h2>
    <div> 
        <div id="num1"></div>
        <div id="operators"></div>
        <div id="num2"></div>
        <div> = </div>
        <div id="answer"></div>
        <button onclick="New()">New</button>
    </div>
</body>
</html>

如果需要调整数字、运算符、结果的排版，修改对应的CSS样式即可。

内容的提问来源于stack exchange，提问作者Miggy Castillo