支持加减乘除带括号可以手写计算表达式的计算器

最新推荐文章于 2022-05-20 16:44:35 发布

dmlcq

最新推荐文章于 2022-05-20 16:44:35 发布

阅读量1.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/dmlcq/article/details/82981403

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.需求是做一个填写税率，税率按钮跟着值变，点击房间价格，形成R，R计算时换算成1。鼠标移开或者点击按钮后都会计算文本域里面的值。公式文本域里面可以手动填写公式表达式，如果计算错误或填写错误符号则会提示。

2.计算效果如下：

3.html代码：

 <div class="hs-collapsible-box">
            <h3 class="hs-collapsible-tit"><p>公式</p><span class="hs-collapsible-arrow"></span></h3>
            <div class="hs-collapsible-list">
                <div class="hs-row mt15">
                    <div class="hs-col-md1">
                        <label class="hs-item-title">税金</label>
                        <div class="hs-item-content">
                            <div class="fl mr10">
                        		<input type="button" class="hs-btn hs-btn-primary" onclick="priceBase()" value="房间价格"/>
                        		<input type="button" class="hs-btn hs-btn-primary" id="rate"  />
                        	</div>
                        </div>
                    </div>
                </div>
                <div class="hs-row mt15">
                    <div class="hs-col-md1">
                        <label class="hs-item-title">符号</label>
                        <div class="hs-item-content">
                            <input type="button" class="hs-btn hs-btn-primary" id="add" value="+"/>
                            <input type="button" class="hs-btn hs-btn-primary" id="minus" value="-"/>
                            <input type="button" class="hs-btn hs-btn-primary" id="plus" value="*"/>
                            <input type="button" class="hs-btn hs-btn-primary" id="dived" value="/"/>
                            <input type="button" class="hs-btn hs-btn-primary" id="left" value="("/>
                            <input type="button" class="hs-btn hs-btn-primary" id="right" value=")"/>
                        </div>
                    </div>
                </div>
                <div class="hs-row mt15">
                    <div class="hs-col-md1">
                        <label class="hs-item-title"><i class="hs-code">*</i>结果:</label>
                        <div class="hs-item-content">
                            <textarea class="hs-textarea hs-textarea-sty4 fl" name="formula" id="formula" >${hotelFormula.formula}</textarea>
                        </div>
                    </div>
                </div>
                <div class="hs-row mt15">
                    <div class="hs-col-md1">
                        <label class="hs-item-title"><i class="hs-code">*</i>计算结果:</label>
                        <div class="hs-item-content">
                        	<input type="text" class="hs-input-txt hs-txt-sty2" id="inputFormula" name="inputFormula" readonly="readonly"/>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <!-- 按钮组 -->
        <div class="hs-btn-group">
        	<input type="submit" class="hs-btn hs-btn-primary submit" value="保存"/>
        </div>

4.js代码：

$(function(){
	getResult();
	var rateValue="${hotelFormula.rateValue}";
	if(null!=rateValue&&"undefined"!=rateValue){
		 $("#rate").val("税率"+rateValue+"%");
	}
	var formula="${hotelFormula.formula}";
	if(null!=formula&&"undefined"!=formula){
		 $("#formula").val(formula);
	}
	//将税率值给到按钮上
	$("#rateValue").blur(function(){
		  $("#rate").val("税率"+$(this).val()+"%");
	});
	$("#minus").click(function(){
		var localval=$("#formula").val();
		localval=$("#formula").val()+$(this).val();
		$("#formula").val(localval);
		getResult();
	});
	$("#add").click(function(){
		var localval=$("#formula").val();
		localval=$("#formula").val()+$(this).val();
		$("#formula").val(localval);
		getResult();
	});
	$("#rate").click(function(){
		var value=$(this).val();
        value=value.replace('税率','');
        value=value.replace('%','');
        value=Number(value)/100;
        value = Math.round(value*10000)/10000.0;
        var localval=$("#formula").val();
		localval=$("#formula").val()+value;
		$("#formula").val(localval);
		getResult();
	});
	$("#plus").click(function(){
		var localval=$("#formula").val();
		localval=$("#formula").val()+$(this).val();
		$("#formula").val(localval);
		getResult();
	});
	$("#dived").click(function(){
		var localval=$("#formula").val();
		localval=$("#formula").val()+$(this).val();
		$("#formula").val(localval);
		getResult();
	});
	$("#left").click(function(){
		var localval=$("#formula").val();
		localval=$("#formula").val()+$(this).val();
		$("#formula").val(localval);
		getResult();
	});
	$("#right").click(function(){
		var localval=$("#formula").val();
		localval=$("#formula").val()+$(this).val();
		$("#formula").val(localval);
		getResult();
	});
	
	$("#formula").blur(function(){
		getResult();
	});
});
function priceBase(){
	var localval=$("#formula").val();
	localval=$("#formula").val()+"R";
	$("#formula").val(localval);
	getResult();
}
function getResult(){
	var Text=$("#formula").val().trim();
	//正则表达式验证不允许+-*/与+-*/搭配
	var pattern =/^.+([+*/-])+([+*/-])+.+$/;
	if(Text.lastIndexOf("R(")>-1||Text.lastIndexOf(")R")>-1||pattern.test(Text)){
		 $("#inputFormula").val(null);
		 return;
	}
	
	Text=Text.replace(/R/g,'1');
	 function  compute(content){
         var index=content.lastIndexOf("(");
         if(index>-1){
             var nextIndex=content.indexOf(")",index);
             if(nextIndex>-1){
                 //递归的思想,一步一步的递归
                 var result=compute(content.substring(index+1,nextIndex));
                 return    compute(content.substring(0,index)+(""+result)+content.substring(nextIndex+1))
             }

         }
         index=content.indexOf("+");
         if(index>-1){
             return compute(content.substring(0,index))+compute(content.substring(index+1));
         }
         index=content.lastIndexOf("-");
         if(index>-1){
             return compute(content.substring(0,index))-compute(content.substring(index+1));
         }
         //如果返回的content为空,则返回0
         index=content.indexOf("*");
         if(index>-1){
             return compute(content.substring(0,index))*compute(content.substring(index+1));
         }
         index=content.lastIndexOf("/");
         if(index>-1){
             return compute(content.substring(0,index))/compute(content.substring(index+1));
         }
         if(content==""||content=="Infinity"){
             return null;
         }else{
         //将content字符串转化为数值,
         //这儿也可以使用一些技巧,比如 content-1+1,使用加减操作符,将字符串转化为数值
             return Number(content);
         }
         return;
     }
     $("#inputFormula").val(compute(Text));
     if( $("#inputFormula").val()=="Infinity"){
    	 $("#inputFormula").val(null);
     }
};
//随便写的提交方法
submit(){
    //正则表达式对公式验证
    formula:function(value, element) {
             return this.optional(element) || !/[^0-9\R\.\+\-\*\/\(\)]/g.test(value);
         },
    //对结果验证
    if($("#inputFormula").val()==0||$("#inputFormula").val()==null||$("#inputFormula").val()=="NaN"){
		 $.openTip(false,"公式错误,请重新输入", true, function(d) {
             //关闭当前弹框
             layer.close(layer.index);
         });
		 return false;
	}
    
}

计算方法是getResult(),公式正则验证有几处，代码都贴进去了。能够避免大部分错误。

正则：/[^0-9\R\.\+\-\*\/]/g，只允许R数字还有+-*/()几个字符出现。正则：/^.+([+*/-])+([+*/-])+.+$/，不允许+-*/搭配+-*/。也不允许R(和R)出现，影响结果。

这里用到的是jquery和js。