整数除法计算，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>整数除法计算</title>
<style>
    body{font-family:"SimSun",serif;font-size:22px;margin:40px;background:#fafafa;text-align:center}
    input[type=number]{width:120px;font-size:22px;margin:0 6px}
    button{font-size:22px;padding:4px 12px}
    #resultArea{display:none;margin-top:30px}
    #vDiv{margin:0 auto;font-family:"Courier New",monospace;font-size:26px;white-space:pre}
</style>
</head>
<body>

<h2>整数除法计算</h2>
<p>
    被除数 <input id="A" type="number" min="0" step="1">
    除数   <input id="B" type="number" min="1" step="1">
    <button onclick="run()">计算</button>
</p>

<div id="resultArea">
    <div id="horizon" style="margin-bottom:15px;font-size:24px"></div>
    <div id="vDiv"></div>
    <div id="steps" style="max-width:700px;margin:20px auto;text-align:left;font-size:20px;line-height:1.6"></div>
</div>

<script>
function run(){
    const A = document.getElementById('A').value.trim();
    const B = document.getElementById('B').value.trim();
    if(!/^\d+$/.test(A) || !/^\d+$/.test(B) || B==='0'){
        alert('请输入正整数，除数不能为0'); return;
    }
    const {horizon, vText, steps, quotient, remainder} = longDiv(A,B);
    document.getElementById('horizon').textContent = horizon;
    document.getElementById('vDiv').textContent    = vText;
    document.getElementById('steps').innerHTML =
        '<strong>计算步骤：</strong><br>' + steps.join('<br>') +
        '<br><br><strong>最终结果：</strong>' + quotient + (remainder ? ' 余 ' + remainder : '');
    document.getElementById('resultArea').style.display = 'block';
}

function longDiv(A,B){
    const len = A.length;
    let pos = 0, rem = 0, quotient = '', steps = [], lines = [];

    /* 第0行：商 */
    let top = ' '.repeat(len);
    /* 第1行：除数+被除数 */
    lines.push(B + ')' + A);

    while(pos < len){
        /* 取数字：先取1位，不够再取1位 */
        let take = rem;
        do{
            take = take * 10 + Number(A[pos]);
            pos++;
        }while(take < Number(B) && pos < len);

        const q = Math.floor(take / Number(B));
        quotient += q;
        const prod = q * Number(B);
        const newRem = take - prod;

        /* 商放到对齐位置 */
        top = top.slice(0,pos-1) + q + top.slice(pos);
        /* 乘积行（对齐） */
        lines.push(' '.repeat(B.length+1+pos-prod.toString().length) + prod.toString());
        /* 横线行 */
        lines.push(' '.repeat(B.length+1+pos-prod.toString().length) + '-'.repeat(prod.toString().length));
        /* 余数行（带落下一位） */
        let nextRemStr = newRem.toString();
        if(pos < len) nextRemStr += A[pos];
        lines.push(' '.repeat(B.length+1+pos-nextRemStr.length) + nextRemStr);

        steps.push(`第${steps.length+1}步：${take} ÷ ${B} = ${q}，余${newRem}`);
        rem = newRem;
    }

    return {
        horizon: `${A} ÷ ${B} = ${quotient}${rem ? ' 余 ' + rem : ''}`,
        vText: top + '\n' + lines.join('\n'),
        steps,
        quotient,
        remainder: rem ? rem.toString() : ''
    };
}
</script>

</body>
</html>
编辑器加载中