Js_页面计算

最新推荐文章于 2022-11-29 09:32:17 发布

widenstage

最新推荐文章于 2022-11-29 09:32:17 发布

阅读量532

点赞数

分类专栏： javascript 文章标签： javascript 计算

本文链接：https://blog.csdn.net/widenstage/article/details/76398082

版权

javascript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

Web应用有时会应该用到页面计算，例如有四项费用，用户填写的时候，页面实现计算，一般用js实现。

               <tr>
                    <td width="8%" height="20" class="tdlabel">费用1：                        
                    </td>
                    <td width="17%">
                        <asp:TextBox ID="fy1" runat="server" οnblur="comze()" class="easyui-numberbox" data-options="precision:2,groupSeparator:','" style="text-align:right;"></asp:TextBox>
                    </td>
                    <td>
                    </td>
                    <td width="8%" height="20" class="tdlabel">费用2：                        
                    </td>
                    <td width="17%">
                        <asp:TextBox ID="fy2" runat="server" οnblur="comze()" class="easyui-numberbox" data-options="precision:2,groupSeparator:','" style="text-align:right;"></asp:TextBox>
                    </td>
                    <td>
                    </td>
                     <td width="8%" height="20" class="tdlabel">费用3：                        
                    </td>
                    <td width="17%">
                        <asp:TextBox ID="fy3" runat="server" οnblur="comze()" class="easyui-numberbox" data-options="precision:2,groupSeparator:','" style="text-align:right;"></asp:TextBox>
                    </td>
                     <td>
                    </td>           
                     <td width="8%" height="20" class="tdlabel">费用4：
                    </td>
                    <td width="17%">
                        <asp:TextBox ID="fy:4" runat="server" οnblur="comze()" class="easyui-numberbox" data-options="precision:2,groupSeparator:','" style="text-align:right;"></asp:TextBox>
                    </td>
                    <td>
                    </td>
                </tr>

我们使用easyui的numberbox控件，保留两位小数，金额超过千元用逗号分隔，右对齐，排版完毕。

输入完毕，失去焦点的时候，我们调用js函数，comze()，下面看代码：

       function comze() {

            var fy1 = document.getElementById("fy1").value;
            fy1 = initvalue(fy1);
            
            var fy2 = document.getElementById("fy2").value;
            fy2 = initvalue(fy2);
            
            var fy3 = document.getElementById("fy3").value;
            fy3 = initvalue(fy3);

            var fy4 = document.getElementById("fy4").value;
            fy4 = initvalue(fy4); 

            document.getElementById("je").value = (Number(fy1) + Number(fy2) + Number(fy3) + Number(fy4)).toFixed(2);

        }   
        
        function initvalue(fy) {
        
            var replaceStr = ','; //要替换的字符串
            if (fy == "") {
                fy = "0";
            }
            else {
                fy = fy.replace(new RegExp(replaceStr, 'g'), '');
            }
            return fy;            
        }

因为可能没有填写，也可能大于1000，所以对输入的数据，进行初始处理一下，然后再计算，计算结果保留两位小数。

【注意】：因为使用了easyui的控件，需要引入jquery和esayui，不赘述了。numberbox控件只能输入数值，不用再用代码判断输入信息是否合法了。