青少年编程与数学 01-008 在网页上完成计算 19课题、分数计算

明月看潮生

于 2024-08-13 07:34:59 发布

阅读量490

点赞数 16

文章标签：青少年编程前端 JavaScript 编程与数学

本文链接：https://blog.csdn.net/qq_40071585/article/details/141147155

版权

青少年编程与数学 01-008 在网页上完成计算 19课题、分数计算

一、分数的计算
二、编程计算
三、调试练习

编程完成分数算式的显示与计算。

一、分数的计算

分数的计算包括加、减、乘、除四种基本运算。以下是分数计算的步骤和规则：

加法和减法

找到公共分母：首先，你需要找到两个分数的公共分母。公共分母是两个分母的最小公倍数。
转换分数：将每个分数转换为具有公共分母的等价分数。
执行加法或减法：分子相加或相减，分母保持不变。

例子

假设我们要计算 ( $\frac{1}{4} + \frac{1}{6}$ )：

公共分母是 ( 4 ) 和 ( 6 ) 的最小公倍数，即 ( 12 )。
转换分数：( $\frac{1}{4} = \frac{3}{12}$ )，( $\frac{1}{6} = \frac{2}{12}$ )。
相加：( $\frac{3}{12} + \frac{2}{12} = \frac{5}{12}$ )。

乘法

分子相乘：将两个分数的分子相乘。
分母相乘：将两个分数的分母相乘。
简化结果：如果可以，将结果简化为最简分数。

例子

假设我们要计算 ( $\frac{2}{3} \times \frac{4}{5}$ )：

乘分子：( $\times 4 = 8$ )。
乘分母：( $\times 5 = 15$ )。
结果：( $\frac{8}{15}$ )（已经是最简分数）。

除法

将除数倒置：将除数的分子和分母倒置。
执行乘法：将被除数与倒置后的除数进行乘法运算。
简化结果：如果可以，将结果简化为最简分数。

例子

假设我们要计算 ( $\frac{3}{4} ÷ \frac{2}{5}$ )：

倒置除数：( $\frac{2}{5}$ ) 变为 ( $\frac{5}{2}$ )。
乘法：( $\frac{3}{4} \times \frac{5}{2}$ )。
乘分子：( $\times 5 = 15$ )。
乘分母：( $\times 2 = 8$ )。
结果：( $\frac{15}{8}$ )。

简化分数

简化分数的步骤是将分子和分母除以它们的最大公约数（GCD）。

例子

简化 ( $\frac{8}{12}$ )：

8 和 12 的最大公约数是 4。
8 除以 4 等于 2。
12 除以 4 等于 3。
简化后的分数是 ( $\frac{2}{3}$ )。

分数的计算可以涉及更复杂的概念，如混合数、带分数等，但基本的运算规则是相同的。

二、编程计算

编写网页程序，完成分数的显示与计算。要求：

功能要求：用户可以两个分数，点击计算按钮后由程序在页面上显示计算过程和结果。计算结果要求是整数或分数。
使用MathJax显示数学算式。
需要HTML来构建界面，CSS来设置样式，以及JavaScript来实现计算逻辑。所有代码都写在一个.html文件中。
页面中显示中文。代码中添加中文注释。
设计尽量美观的样式，使用暗色调背景。页面元素在网页中合理居中。
用户可以多次输入并计算。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>分数计算器</title>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        body {
            background-color: #333;
            color: white;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            background: #444;
            border-radius: 10px;
            padding: 20px;
        }

        input[type="number"],
        select {
            width: 70px;
            margin: 5px;
            text-align: center;
            border: none;
        }

        button {
            background: #555;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background: #666;
        }

        .result {
            margin-top: 20px;
            font-size: 48px;
        }

        .hr {
            border-bottom: 2px solid yellow;
        }

        table {
            align-self: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>分数计算器</h1>
        <table>
            <tr>
                <td class="hr"><input type="number" id="num1" placeholder="分子1"></td>
                <td rowspan="2"><select id="operator">
                        <option value="+">+</option>
                        <option value="-">-</option>
                        <option value="*">*</option>
                        <option value="/">/</option>
                    </select></td>
                <td class="hr"><input type="number" id="num2" placeholder="分子2"></td>
                <td rowspan="2"><button onclick="calculate()">计算</button></td>
            </tr>
            <tr>
                <td><input type="number" id="denom1" placeholder="分母1"></td>
                <td><input type="number" id="denom2" placeholder="分母2">
                </td>
            </tr>
        </table>
        <p class="result" id="result"></p>
    </div>
    <script>
        function calculate() {
            // 获取输入值
            let num1 = document.getElementById('num1').value;
            let denom1 = document.getElementById('denom1').value;
            let operator = document.getElementById('operator').value;
            let num2 = document.getElementById('num2').value;
            let denom2 = document.getElementById('denom2').value;

            // 检查输入的有效性
            if (isNaN(num1) || isNaN(denom1) || denom1 === "0" ||
                isNaN(num2) || isNaN(denom2) || denom2 === "0") {
                alert("请输入有效的分数（分母不能为零）！");
                return;
            }

            // 计算结果
            let result;
            if (operator === '+') {
                result = addFractions(num1, denom1, num2, denom2);
            } else if (operator === '-') {
                result = subtractFractions(num1, denom1, num2, denom2);
            } else if (operator === '*') {
                result = multiplyFractions(num1, denom1, num2, denom2);
            } else if (operator === '/') {
                result = divideFractions(num1, denom1, num2, denom2);
            }

            // 显示结果
            // let mathString = `<p> 
            // \[
            //  $\frac{${num1}}{${denom1}} ${operator} \frac{${num2}}{${denom2}} = \frac{${result.numerator}}{${result.denominator}}$
            // \]
            // </p>`;
            let mathString = `\\(\\frac{${num1}}{${denom1}} ${operator} \\frac{${num2}}{${denom2}} = \\frac{${result.numerator}}{${result.denominator}}\\)`;
            document.getElementById('result').innerHTML = mathString;
            // 延迟执行MathJax渲染以确保DOM更新完成
            setTimeout(function () {
                MathJax.typeset();
            }, 100);
        }

        // 分数加法
        function addFractions(n1, d1, n2, d2) {
            let commonDenominator = d1 * d2;
            let numerator = n1 * d2 + n2 * d1;
            return simplifyFraction(numerator, commonDenominator);
        }

        // 分数减法
        function subtractFractions(n1, d1, n2, d2) {
            let commonDenominator = d1 * d2;
            let numerator = n1 * d2 - n2 * d1;
            return simplifyFraction(numerator, commonDenominator);
        }

        // 分数乘法
        function multiplyFractions(n1, d1, n2, d2) {
            let numerator = n1 * n2;
            let denominator = d1 * d2;
            return simplifyFraction(numerator, denominator);
        }

        // 分数除法
        function divideFractions(n1, d1, n2, d2) {
            let numerator = n1 * d2;
            let denominator = d1 * n2;
            return simplifyFraction(numerator, denominator);
        }

        // 简化分数
        function simplifyFraction(n, d) {
            let gcd = greatestCommonDivisor(n, d);
            return { numerator: n / gcd, denominator: d / gcd };
        }

        // 求最大公约数
        function greatestCommonDivisor(a, b) {
            while (b !== 0) {
                let t = b;
                b = a % b;
                a = t;
            }
            return a;
        }
    </script>
</body>

</html>