实现计算输入数N可被数M整除次数的前端页面开发需求

嘿，我来帮你搞定这个学校编程作业！需求很清晰：做一个前端页面，输入两个整数N和M，点击提交按钮后，把N能被M整除的次数显示在id为text的<div>里。比如输入N=6、M=2时结果是3次，N=49、M=7时是2次对吧？

下面是完整的实现代码，我还给原基础结构做了优化，让页面更易用、逻辑更健壮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>整除次数计算器</title>
    <style>
        /* 简单美化页面，提升用户体验 */
        .input-group {
            margin: 12px 0;
        }
        label {
            display: inline-block;
            width: 120px;
            font-size: 16px;
        }
        input {
            padding: 8px 10px;
            width: 180px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 8px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #text {
            margin-top: 20px;
            font-size: 18px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <label for="nInput">输入整数N：</label>
        <input type="number" id="nInput" placeholder="请输入整数N">
    </div>
    <div class="input-group">
        <label for="mInput">输入整数M：</label>
        <input type="number" id="mInput" placeholder="请输入整数M">
    </div>
    <div id="button">
        <button>提交计算</button>
    </div>
    <div id="text">
        <p></p>
    </div>

    <script>
        // 获取页面元素
        const nInput = document.getElementById('nInput');
        const mInput = document.getElementById('mInput');
        const submitButton = document.querySelector('#button button');
        const resultDisplay = document.querySelector('#text p');

        // 核心计算函数：计算N能被M整除的次数
        function getDivideCount(n, m) {
            // 处理M为0的异常情况，避免除以0错误
            if (m === 0) {
                return '❌ 错误：整数M不能为0！';
            }
            
            // 取绝对值，处理负数输入的情况（比如N=-6、M=2，结果依然是3次）
            let currentNum = Math.abs(n);
            const absM = Math.abs(m);
            let count = 0;

            // 循环整除，直到无法整除为止
            while (currentNum % absM === 0) {
                count++;
                currentNum = currentNum / absM;
            }

            return `✅ 整数${n}能被整数${m}整除${count}次`;
        }

        // 提交按钮点击事件
        submitButton.addEventListener('click', () => {
            // 将输入值转换为整数
            const n = parseInt(nInput.value);
            const m = parseInt(mInput.value);

            // 验证输入是否为有效整数
            if (isNaN(n) || isNaN(m)) {
                resultDisplay.textContent = '⚠️ 请输入有效的整数！';
                return;
            }

            // 计算并显示结果
            const result = getDivideCount(n, m);
            resultDisplay.textContent = result;
        });
    </script>
</body>
</html>

• HTML优化：
  • 给输入框设置了type="number"，限制用户只能输入数字，避免非数字输入的麻烦；
  • 添加了<label>标签，让输入框的用途更清晰；
  • 加了简单的CSS样式，让页面看起来更舒服，不是光秃秃的原生控件。
• JavaScript逻辑：
  • 做了异常处理：判断M是否为0，避免出现除以0的报错；同时验证输入是否为有效整数，给用户明确的提示；
  • 处理了负数场景：取N和M的绝对值，这样不管输入正负数，计算结果都是正确的；
  • 核心循环逻辑：每次整除后更新当前数值，直到无法整除为止，统计次数。

• 输入N=6，M=2 → 显示：✅ 整数6能被整数2整除3次
• 输入N=49，M=7 → 显示：✅ 整数49能被整数7整除2次
• 输入N=-12，M=3 → 显示：✅ 整数-12能被整数3整除2次
• 输入M=0 → 显示：❌ 错误：整数M不能为0！
• 输入非数字（比如字母）→ 显示：⚠️ 请输入有效的整数！

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