标题:请各位大侠帮忙优化一下这两段js
只看楼主
e2018
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2017-7-14
 问题点数:0 回复次数:3 
请各位大侠帮忙优化一下这两段js
我的html页面代码如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CKEditor demo</title>  
    <script type="text/javascript" src="__PUBLIC__/static/js/jquery-3.2.1.min.js"></script>   
</head>
<body>
    <p>加法数字一: <input style="text" id="first" style="width:40px;" /> </p>
    <p>加法数字一: <input style="text" id="second" style="width:40px;" /> </p>
    <p>加法结果一: <input style="text" id="jieguo" style="width:40px;" /> </p>
    <br />
    <p>加法数字二: <input style="text" id="firstaa" style="width:40px;" /> </p>
    <p>加法数字二: <input style="text" id="secondaa" style="width:40px;" /> </p>
    <p>加法结果二: <input style="text" id="jieguoaa" style="width:40px;" /> </p>
    <!--引入加法运算jq -->
    <script type="text/javascript" src="__PUBLIC__/static/js/jisuanb.js"></script>
</body>
</html>
以下为我的jisuang中的js代码请各位帮忙优化一下,因为两段自定义function重复太多:

//用.on("input protected")监控html页面里input值的变化,如果有改变就需要重新执行传值
$(document).on("input protected",function(){

$("#jieguo").val(add);
$("#jieguoaa").val(sub);
})

/** 以下为自定义函数,加法一(add)正确计算 **/
/**
* 加法运算,避免数据相加小数点后产生多位数和计算精度损失。
*
* @param num1加数1 | num2加数2
*
* 加数可增加或减少
*/
var add = function numAdd(num1, num2) {
var num1 = $("#first").val();
var num2 = $("#second").val();
var baseNum, baseNum1, baseNum2;
try {
baseNum1 = num1.toString().split(".")[1].length;
} catch (e) {
baseNum1 = 0;
}
try {
baseNum2 = num2.toString().split(".")[1].length;
} catch (e) {
baseNum2 = 0;
}
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
return (num1 * baseNum + num2 * baseNum) / baseNum;
};

/** 以下为自定义函数,加法二(sub)正确计算 **/
/**
* 加法运算,避免数据相加小数点后产生多位数和计算精度损失。
*
* @param num1加数1 | num2加数2
*
* 加数可增加或减少
*/
var sub= function numAdd(num1, num2) {
var num1 = $("#firstaa").val();
var num2 = $("#secondaa").val();
var baseNum, baseNum1, baseNum2;
try {
baseNum1 = num1.toString().split(".")[1].length;
} catch (e) {
baseNum1 = 0;
}
try {
baseNum2 = num2.toString().split(".")[1].length;
} catch (e) {
baseNum2 = 0;
}
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
return (num1 * baseNum + num2 * baseNum) / baseNum;
};
因为我要在同一html页面中将两个不同的计算结果输出到html页面里两个不同的input里,这样写是可以输出到不同的input里,我想因为这样写重复代码不太合理,请教各位,怎样才能优化成一段代码,并将两个计算结果输出到不同的input里呢?就是代码重用那种。
搜索更多相关主题的帖子: text 加法 input style var 
2017-07-14 10:02
e2018
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2017-7-14
得分:0 
没人帮一下吗
2017-07-20 17:26
小熊同学
Rank: 1
等 级:新手上路
帖 子:3
专家分:0
注 册:2018-1-2
得分:0 
有点多,看懵了
2018-01-02 15:30
cho1
Rank: 2
等 级:论坛游民
帖 子:9
专家分:40
注 册:2018-1-11
得分:0 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CKEditor demo</title>  
    <script type="text/javascript" src="__PUBLIC__/static/js/jisuanb.js"></script>  
</head>
<body>
    <div id="box1">
        <input style="text" style="width:20px;" />+
        <input style="text" style="width:20px;" />=
        <input style="text" style="width:20px;" />
    </div>

    <div id="box2">
        <input style="text" style="width:20px;" />+
        <input style="text" style="width:20px;" />=
        <input style="text" style="width:20px;" />
    </div>
    <!--引入加法运算jq -->
    <script>


        function add () {
            var num = [],
                baseNum = [],
                val;

            for(var i = 0;i <=1;i++){
                num[i] = $(this).find("input").eq(i).val();

                try {
                    baseNum[i] = num[i].toString().split(".")[1].length;
                } catch (e) {
                    baseNum[i] = 0;
                }
            }

            baseNum[2] = Math.pow(10, Math.max(baseNum[0], baseNum[1]));

            var val = (num[0] * baseNum[2] + num[1] * baseNum[2]) / baseNum[2];

            $(this).find("input").eq(2).val(val);
        }

        $("#box1").change(add);
        $("#box2").change(add);
    </script>
</body>
</html>
2018-01-11 17:11



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-479379-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.100095 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved