首页 前端知识 html5&css&js代码 005 小学数学四则运算练习

html5&css&js代码 005 小学数学四则运算练习

2024-05-08 10:05:42 前端知识 前端哥 513 350 我要收藏

html5&css&js代码 005 小学数学四则运算练习

  • 一、代码
  • 二、解释

这段代码定义了一个页面,用于小学数学四则运算的练习。这可能有点难,实际如果需要可以通过更改代码来达到要求。

一、代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- 设置页面视口,适应不同设备的宽度,并设置初始缩放为1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>小学数学四则运算练习</title>
    <!-- 页面样式定义 -->
    <style>
        /* 设置页面背景颜色、居中显示、垂直居中、字体大小、颜色和字体 family */
        body {
            /* 设置背景颜色为深灰色 */
            background-color: #333;
            /* 使用弹性布局使得内容居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 设置高度为视窗高度,使得内容垂直居中 */
            height: 100vh;
            /* 设置字体大小和颜色 */
            font-size: 60px;
            color: white;
            /* 设置字体为Arial或任意 sans-serif 字体 */
            font-family: Arial, sans-serif;
            /* 定义容器的文本居中 */

            .container {
                text-align: center;
            }

            .view {
                line-height: 100px; /* 设置固定行高 */
                height: 100px; /* 如果需要强制元素高度一致,可加上height */
                overflow: hidden; /* 防止内容超出元素高度 */
            }

            input[type="text"] {
                /* 设置字体大小为100px */
                font-size: 100px;
                /* 设置宽度为屏幕宽度的30% */
                width: 30%;
                /* 设置底部外边距为20px */
                margin-bottom: 20px;

            }
    </style>
</head>
<body>
<div class="container">
    <p>小学数学四则运算练习</p>
    <!-- 用于显示习题的区域 -->
    <div class="view" id="question">请按回车键生成习题</div>
    <!-- 用于显示答案的区域 -->
    <div class="view" id="answer"></div>
    <!-- 用于显示计时的区域 -->
    <div class="view" id="time"></div>
    <!-- 用于显示结果的区域 -->
    <div class="view" id="result"></div>
    <!-- 用户输入答案的输入框,回车键触发答案检查 -->
    <input type="text" id="user-answer" onkeydown="if (event.keyCode === 13) checkAnswer()">
    <!-- 提示用户如何使用输入框的文本 -->
    <p>空框时按回车生成习题,输入答案后按回车键验证<br></p>
</div>
<script>
    // 定义一个数组包含可能的操作数
    let operands = Array.from({length: 10}, (_, i) =>
        // 这个函数生成一个随机数。首先使用Math.random()生成一个0到1之间的随机数,然后乘以i < 5 ? 9 : 99的结果,
        // 再使用Math.floor()取整,之后加上Math.random() < 0.5 ? 0.1 : 0。
        // 这个表达式会生成一个在0到9.9之间的随机数(如果i小于5),或者在0到99.9之间的随机数(如果i大于等于5)。
        Math.floor(Math.random() * (i < 5 ? 9 : 99)) + (Math.random() < 0.5 ? 0.1 : 0));

    function getRandomOperand() {
        return operands[Math.floor(Math.random() * operands.length)];
    }

    // 定义一个数组包含可能的运算符
    let operators = ['+', '-', '*', '/'];

    // operators.push('^'); // 添加乘方运算符,但在JS中需要处理
    function getRandomOperator() {
        return operators[Math.floor(Math.random() * operators.length)];
    }

    function generateExpression(depth = 0, maxDepth = 3) {
        // 创建一个表达式字符串,同时考虑运算优先级
        // 该函数用于生成一个随机的数学表达式字符串。函数接受两个参数:depth表示当前生成表达式的深度,默认为0;maxDepth表示生成
        // 表达式的最大深度,默认为3。函数通过递归的方式生成表达式,根据随机概率选择是否添加括号,并随机选择运算符和操作数。对于乘
        // 方运算符,确保其右边有操作数;对于其他运算符,两边都可能有操作数。当达到最大深度时,返回一个随机的操作数。最终生成的表达
        // 式以字符串形式返回。
        if (depth === maxDepth) {
            return getRandomOperand().toString();
        }
        let expression = '';
// 随机决定是否添加括号
        if (Math.random() < 0.3 && depth < maxDepth - 1) {
            expression += '(';
            expression += generateExpression(depth + 1);
            expression += ')';
        } else {
            expression += getRandomOperand();
        }
        let operator = getRandomOperator();
        if (operator === '^') { // 对于乘方运算,确保右边有操作数
            expression += '^';
            expression += generateExpression(depth);
        } else { // 其他运算符两边都可能有操作数
            expression += operator;
            expression += generateExpression(depth + 1);
        }
        return expression;
    }

    // 计算生成的表达式
    function calculateExpression(expressionStr) {
        // 将"^"替换为Math.pow以执行乘方运算
        expressionStr = expressionStr.replace(/\^/g, '**');
        // 使用eval计算结果,但请确保表达式来自可靠源,否则有安全风险
        return eval(expressionStr);
    }

    // 生成并计算一个表达式
    function generateQuestion() {
        /**
         * 生成并计算一个表达式,然后将表达式显示在文档中,并返回计算结果(保留两位小数)。
         * 该过程包括:
         * 1. 生成一个表达式。
         * 2. 计算这个表达式的结果。
         * 3. 将这个表达式显示在页面上。
         * 4. 返回表达式的计算结果,结果保留两位小数。
         *
         * @returns {number} 表达式的计算结果,保留两位小数。
         */
        let question = generateExpression(); // 生成一个表达式
        let answer = calculateExpression(question); // 计算生成的表达式
        document.getElementById('question').innerText = question; // 将表达式显示在页面上
        return Number(answer.toFixed(2)); // 返回计算结果,保留两位小数

    }

    let currentAnswer;
    let startTime;

    function startPractice() {
        /**
         * 生成问题并初始化答题界面
         * 无参数
         * 无返回值
         */
        currentAnswer = generateQuestion();
        document.getElementById('answer').innerText = '';
        document.getElementById('time').innerText = '';
        document.getElementById('result').innerText = '';
        startTime = new Date().getTime();
    }

    function checkAnswer() {
        /**
         * 处理用户提交的答案,并进行判分。
         * 无参数。
         * 无返回值。
         */
        let userAnswer = parseFloat(document.getElementById('user-answer').value); // 获取用户输入的答案
        let currentTime = new Date().getTime(); // 获取当前时间戳
        let elapsedTime = (currentTime - startTime) / 1000; // 计算答题所用时间,转换为秒
        // 检查用户输入是否为合法数字
        if (isNaN(userAnswer) !== true) {
            userAnswer = Number(userAnswer.toFixed(2)); // 如果是合法数字,则保留两位小数
        }
        // 如果用户输入不是合法数字,则重新开始练习
        if (isNaN(userAnswer)) {
            startPractice();
        } else if (userAnswer === currentAnswer) { // 如果用户答案与正确答案相同
            document.getElementById('answer').innerText = currentAnswer; // 显示正确答案
            document.getElementById('time').innerText = `用时:${elapsedTime.toFixed(2)}`; // 显示用时
            document.getElementById('result').innerText = '答案正确'; // 显示结果:正确

        } else { // 如果用户答案与正确答案不同
            document.getElementById('answer').innerText = currentAnswer; // 显示正确答案
            document.getElementById('time').innerText = `用时:${elapsedTime.toFixed(2)}`; // 显示用时
            document.getElementById('result').innerText = '答案错误'; // 显示结果:错误
        }
        document.getElementById('user-answer').value = ''; // 清空输入框
    }
    window.onload = function () {
        // 将焦点设置到ID为"user-answer"的元素上。
        document.getElementById("user-answer").focus();
    };
</script>
</body>
</html>

二、解释

这段HTML代码定义了一个页面,用于小学四则运算的练习。页面具有以下功能:
页面布局与样式:通过CSS定义了页面的整体样式,包括背景颜色、字体大小和颜色、居中显示等内容。
生成随机习题:通过JavaScript函数generateExpression生成一个随机的数学表达式,并将其显示在页面上。
计算答案:使用JavaScript函数calculateExpression计算生成的表达式的答案。
用户交互:用户可以在页面上的输入框中输入答案,然后按回车键验证答案的正确性。
答案的验证由checkAnswer函数处理。
显示结果:根据用户答案的正确性,在页面上显示相应的结果。
计时功能:记录用户回答问题所花费的时间,并在页面上显示。
适应不同设备:通过<meta>标签设置页面视口,使页面在不同设备上都能正确显示。
以上是该HTML代码的主要功能。代码中使用了JavaScript和CSS来实现这些功能。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7516.html
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!