用HTML5+JavaScript实现小学生整数乘除法演算式

本文链接：https://blog.csdn.net/cnds123/article/details/141992450

用HTML5+JavaScript实现小学生整数乘除法演算式

用HTML5+JavaScript实现小学生整数乘法和整数除法演算式，比较直观，以便小学生理解学习整数乘法和整数除法演算式。

整数乘法竖式演示

界面上有两个整数输入框，单击“计算”按钮，显示小学生整数演示竖式，效果图：

参考代码来源https://yss5678.blog.csdn.net/article/details/140970988略作修改，源码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整数乘法算式</title>
    <style>
   /* 页面整体样式 */
        body {
            background-color: #4682B4;
            color: #dbc5c5;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            margin: 0;
        }

        /* 容器样式 */
        .container {
            text-align: center;
            width: 40%;
        }

        /* 输入框样式 */
        input[type="number"] {
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
            width: 98%;
            padding: 10px;
            margin: 10px 10px;
            background-color: rgb(255, 255, 255);
            border: none;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            text-align: right;
            letter-spacing: 10px;
        }

        /* 结果样式 */
        .result {
            font-family: 'Courier New', Courier, monospace;
            margin-top: 20px;
            padding: 10px;
            font-size: 18px;
            text-align: right;
            letter-spacing: 10px;
        }

        /* 按钮样式 */
        button {
            font-size: 24px;
            background-color: #98FB98;
            color:#4682B4
            padding: 10px 50px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 按钮悬停样式 */
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>整数乘法算式</h1>
        <input type="number" id="factor1" placeholder="输入因数">
        <input type="number" id="factor2" placeholder="输入因数">
        <button onclick="calculate()">计算</button>
        <div class="result" id="result"></div>
    </div>

    <script>
        function calculate() {
            // 获取用户输入的第一个因数
            let factor1 = document.getElementById('factor1').value;
            // 获取用户输入的第二个因数
            let factor2 = document.getElementById('factor2').value;

            if (!factor1 || !factor2) {
                alert('请输入两个因数！');
                return;
            }

            // 获取用于显示结果的元素
            let resultElement = document.getElementById('result');
            // 清空结果
            resultElement.textContent = '';
            // 调用乘法计算函数
            let result = multiply(factor1, factor2);
            // 显示结果
            resultElement.innerHTML = result;
        }

        function multiply(factor1, factor2) {
            // 初始化结果数组，用于存储每一行的内容
            let lines = [];
            // 获取第一个因数的长度
            let len1 = factor1.toString().length;
            // 获取第二个因数的长度
            let len2 = factor2.toString().length;
            // 初始化进位值
            let carry = 0;
            // 初始化单个乘积
            let product = 0;

            lines.push(`<p>${factor1}</p>`);
            let nbsp = '&nbsp;';
            nbsp = nbsp.repeat(Math.abs(len2 - len1));
            lines.push(`<p>x${nbsp + factor2}</p>`);
            lines.push('<hr>');
            // 竖式计算
            for (let j = len2 - 1; j >= 0; j--) {
                let line = '';
                for (let i = len1 - 1; i >= 0; i--) {
                    // 计算单个数字的乘积加上进位值
                    product = (factor1.toString()[i] * 1) * (factor2.toString()[j] * 1) + carry;
                    // 更新进位值
                    carry = Math.floor(product / 10);
                    // 添加单个数字乘积的个位数到结果字符串
                    line = (product % 10) + line;
                }
                // 如果还有进位，则添加到结果字符串
                if (carry > 0) {
                    line = carry + line;
                    carry = 0;
                }
                // 添加空格以对齐
                line = line + '0'.repeat(len2 - 1 - j);
                // 添加这一行到结果数组
                if (!isAllZeros(line)) {
                    lines.push(`<p>${line}</p>`);
                }
                // 如果不是第二个因数的最后一列，则添加分隔线
                // if (j > 0) {
                //     lines.push('<hr>');
                // }
            }

            // 添加最终的分隔线
            lines.push('<hr>');
            // 添加最终结果
            lines.push(`<p>${(factor1 * factor2).toString()}</p>`);

            // 返回结果数组
            return lines.join('');
        }
        function isAllZeros(str) {
            // 使用 every 方法检查字符串中的每一个字符是否都是 "0"
            return str.split('').every(char => char === '0');
        }
    </script>
</body>

</html>

整数整除竖式教学演示

界面上有两个整数输入框每次单击“计算”按钮，要显示小学数学整数整除竖式效果。效果图：

参考代码来源https://blog.csdn.net/qq_40071585/article/details/140971020，略作修改，源码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整数除法算式</title>
    <style>
        /* 页面整体样式 */
        body {
            background-color: #4682B4;
            color: #dbc5c5;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            margin: 0;
        }

        /* 容器样式 */
        .container {
            text-align: center;
            width: 40%;
        }

        /* 输入框样式 */
        input[type="number"] {
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
            width: 98%;
            padding: 10px;
            margin: 10px 10px;
            background-color: rgb(255, 255, 255);
            border: none;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            text-align: right;
            letter-spacing: 10px;
        }

        /* 结果样式 */
        .result {
            font-family: 'Courier New', Courier, monospace;
            margin-top: 20px;
            padding: 10px;
            font-size: 18px;
            text-align: right;
            letter-spacing: 10px;
        }

        /* 按钮样式 */
        button {
            font-size: 24px;
            background-color: #98FB98;
            color:#4682B4
            padding: 10px 50px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 按钮悬停样式 */
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>整数除法算式</h1>
        <form id="calculatorForm">
            <!-- 被除数输入框 -->
            <input type="number" id="dividend" placeholder="被除数">
            <!-- 除数输入框 -->
            <input type="number" id="divisor" placeholder="除数">
            <!-- 计算按钮 -->
            <button type="button" onclick="calculate()">计算</button>
        </form>
        <!-- 结果展示区域 -->
        <div id="result" class="result"></div>
    </div>

    <script>
        /**
         * 计算除法竖式
         */
        function calculate() {
            // 获取输入值
            const dividend = parseInt(document.getElementById('dividend').value);
            const divisor = parseInt(document.getElementById('divisor').value);

            // 清空之前的结果
            document.getElementById('result').innerHTML = '';

            // 校验输入
            if (isNaN(dividend) || isNaN(divisor) || divisor === 0) {
                alert("请输入有效的数字且除数不能为0");
                return;
            }

            // 初始化变量
            let quotient = Math.floor(dividend / divisor); // 商
            let remainder = dividend % divisor; // 余数

            // 结果的HTML字符串
            let resultHtml = '';
            let resultquotient = '';

            // 转换被除数和除数为字符串
            let strdividend = dividend.toString();
            let strdivisor = divisor.toString();

            // 获取被除数和除数的长度
            let len1 = strdividend.length;
            let len2 = strdivisor.length;

            // 初始化临时变量
            let tempquotient = 0; // 临时商
            let subtrahend = 0; // 临时减数

            // 构建结果HTML
            resultHtml += '<hr>';
            resultHtml += `<p>${strdivisor}/${strdividend}</p>`;
            let strspace = '';
            let tempDividend = ""; // 临时被除数子串
            let numtempDividend = 0; // 临时被除数数值

            // 开始计算
            let start = false;
            for (var i = len2 - 1; i <= len1 - 1; i++) {
                // 更新临时被除数
                if (i == len2 - 1) {
                    tempDividend = dividend.toString().substring(0, len2);
                } else {
                    tempDividend += dividend.toString().substring(i, i + 1);
                }
                numtempDividend = parseInt(tempDividend);

                // 计算临时商和减数
                if (numtempDividend >= divisor) {
                    tempquotient = Math.floor(numtempDividend / divisor);
                    subtrahend = divisor * tempquotient;
                    tempDividend = (numtempDividend - subtrahend).toString();
                    resultquotient += tempquotient.toString();
                    if (!start) {
                        start = true;
                    }
                } else {
                    tempquotient = 0;
                    subtrahend = 0;
                    resultquotient += '0';
                }

                // 构建每一步的结果HTML
                if (start || i == len1 - 1) {
                    strspace = '&nbsp;'.repeat(len1 - 1 - i);
                    resultHtml += `<p>${numtempDividend}${strspace}</p>`;
                    resultHtml += `<p>-${subtrahend}${strspace}</p><hr>`;
                }
            }

            // 最终结果
            resultquotient = resultquotient.replace(/^0+/, '') || '0';
            resultHtml = `<p>${resultquotient}<p>` + resultHtml;
            resultHtml += `<p>商: ${quotient}, 余数: ${remainder}</p>`;

            // 显示结果
            document.getElementById('result').innerHTML = resultHtml;
        }
    </script>
</body>

</html>