乘法计算格式

最新推荐文章于 2021-01-14 00:17:47 发布

stan_8mile

最新推荐文章于 2021-01-14 00:17:47 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： html js 文章标签： html js

本文链接：https://blog.youkuaiyun.com/stan_8mile/article/details/78342391

html 同时被 2 个专栏收录

2 篇文章

订阅专栏

2 篇文章

订阅专栏

本文探讨如何使用HTML构建用户界面，结合JavaScript实现简单的乘法计算功能。通过创建输入框，按钮及结果显示区域，利用JS事件监听和算术运算，用户可以进行交互式的乘法计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <script>

        function multiplication(){
            document.getElementById("t1").innerHTML='';

            var i1 = document.getElementById("i1").value;
            var i2 = document.getElementById("i2").value;

            var t = document.getElementById("t1");

            var i2_arr = i2.split('');



            var count = 0; //控制每行积最后有多少空白

            // 根据乘数判断有多少行；循环创建tr
            for(var n=i2_arr.length-1;n>=0;n--){

                var trnode = document.createElement('tr');

                var row_n = i2_arr[n]*i1; //计算每行的积 

                var row_n_arr = row_n.toString().split('');

                var count2 = 0; //控制每行tr中tdpan

                //循环创建td,排放每行的积             
                for(var m = (i1.length+i2.length)-count-1;m>=0;m--){                    

                    if(m<row_n_arr.length){
                        var tdnode = document.createElement('td');
                        tdnode.innerHTML = row_n_arr[count2];
                        trnode.appendChild(tdnode);
                        count2++;
                    }else{
                        var tdnode = document.createElement('td');
                        tdnode.innerHTML = ' ';
                        trnode.appendChild(tdnode);
                    }
                }
                for(var k=0;k<count;k++){
                    var tdnode = document.createElement('td');
                    tdnode.innerHTML = ' ';
                    trnode.appendChild(tdnode);
                }
                count++;
                t.appendChild(trnode);
            }


            var tr_line = document.createElement('tr');
            tr_line.innerHTML = "<td colspan='"+i1.length+i2.length+"'>------------------</td>"
            t.appendChild(tr_line);


            //结果
            var count3=0;  //控制结果排放顺序
            var tr_result = document.createElement('tr');
            var result = i1*i2;
            var result_arr = result.toString().split('');

            for(var r = (i1.length+i2.length)-1;r>=0;r--){
                if(r>result_arr.length-1){
                    var td_result = document.createElement('td');
                    td_result.innerHTML = ' ';
                    tr_result.appendChild(td_result);
                }else{
                    var td_result = document.createElement('td');
                    td_result.innerHTML = result_arr[count3];
                    tr_result.appendChild(td_result);
                    count3++;
                }
            }


            t.appendChild(tr_result);

        }
        </script>
    </head>
    <body>
        <input style='text-align:right' type='text' value='' id='i1' /><br />
        <input style='text-align:right' type="text" value="" id="i2" />
        <button onclick="multiplication()">M</button>
        <table id="t1">

        </table>
    </body>
</html>