Js_页面计算

来源：互联网发布：js点击隐藏按钮编辑：程序博客网时间：2024/06/10 23:51

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

               <tr>                    <td width="8%" height="20" class="tdlabel">费用1：                                            </td>                    <td width="17%">                        <asp:TextBox ID="fy1" runat="server" onblur="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" onblur="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" onblur="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" onblur="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控件只能输入数值，不用再用代码判断输入信息是否合法了。

阅读全文

0 0