微信小程序计算器

微信小程序计算器

index.wxml

<viewclass='screen'>{{result}}</view><viewclass='test-bg'><viewclass='btnGroup'><viewclass='item grey'bindtap='clickButton'id="{{C}}">AC</view><viewclass='item grey'bindtap='clickButton'id="{{addSub}}">+/-</view><viewclass='item grey'bindtap='clickButton'id="{{percent}}">%</view><viewclass='item brown'bindtap='clickButton'id="{{div}}">÷</view></view><viewclass='btnGroup'><viewclass='item black'bindtap='clickButton'id="{{id7}}">7</view><viewclass='item black'bindtap='clickButton'id="{{id8}}">8</view><viewclass='item black'bindtap='clickButton'id="{{id9}}">9</view><viewclass='item brown'bindtap='clickButton'id="{{mut}}">×</view></view><viewclass='btnGroup'><viewclass='item black'bindtap='clickButton'id="{{id4}}">4</view><viewclass='item black'bindtap='clickButton'id="{{id5}}">5</view><viewclass='item black'bindtap='clickButton'id="{{id6}}">6</view><viewclass='item brown'bindtap='clickButton'id="{{sub}}">-</view></view><viewclass='btnGroup'><viewclass='item black'bindtap='clickButton'id="{{id1}}">1</view><viewclass='item black'bindtap='clickButton'id="{{id2}}">2</view><viewclass='item black'bindtap='clickButton'id="{{id3}}">3</view><viewclass='item brown'bindtap='clickButton'id="{{add}}">+</view></view><viewclass='btnGroup'><viewclass='item0 black'bindtap='clickButton'id="{{id0}}">0</view><viewclass='item black'bindtap='clickButton'id="{{dot}}">.</view><viewclass='item brown'bindtap='clickButton'id="{{equ}}">=</view></view></view>

index.wxss

page{width: 100%;height: 100%;background-color: black;}.test-bg{position: fixed;bottom: 0;}.screen{position: fixed;color: #fbfbfb;font-size: 50px;bottom: 850rpx;text-align: right;width: 730rpx;word-wrap: break-word;}.btnGroup{display: flex;/*弹性显示结构*/flex-direction: row;/*横向显示*/}.item{width: 150rpx;height: 150rpx;line-height: 150rpx;border-radius: 100%;text-align: center;margin-right: 40rpx;margin-bottom: 8rpx;margin-left: 8rpx;}.brown{/* 前景色 */color: #000000;font-size: 50rpx;/* border: solid 1rpx #ffffff; *//* 背景色 */background-color: #a5a5a5;}.black{/* 前景色 */color: #fefefe;font-size: 65rpx;/* border: solid 1rpx #ffffff; *//* 背景色 */background: #333333;}.grey{/* 前景色 */color: #fbfbfb;font-size: 50rpx;/* 背景色 */background: #a5a5a5;}.item0{width: 350rpx;line-height: 180rpx;border-radius: 175rpx;text-align: center;margin-right: 40rpx;}

index.js文件

Page({data:{C:'C',addSub:'addSub',add:'+',sub:'-',mut:'×',div:'÷',equ:'=',percent:'%',dot:'.',id0:'0',id1:'1',id2:'2',id3:'3',id4:'4',id5:'5',id6:'6',id7:'7',id8:'8',id9:'9',result:'0',valiBackOfArray:['+','-','×','÷','.'],completeCalculate:false},// 计算结果calculate:function(str){// 判断负数var isNagativeNum =false;if(str.charAt(0)=='-'){
        str = str.replace('-','').replace('(','').replace(')','');
        isNagativeNum =true;}// 字符串解析var addArray = str.split('+');var sum =0.0;for(var i =0; i < addArray.length; i++){if(addArray[i].indexOf('-')==-1){if(addArray[i].indexOf('×')!=-1|| addArray[i].indexOf('÷')!=-1|| addArray[i].indexOf('%')!=-1)
            sum +=this.calculateMutDiv(addArray[i]);else sum +=Number(addArray[i]);}else{var subArray = addArray[i].split('-');var subSum =0;if(subArray[0].indexOf('×')!=-1|| subArray[0].indexOf('÷')!=-1|| subArray[0].indexOf('%')!=-1) subSum =this.calculateMutDiv(subArray[0]);else subSum =Number(subArray[0]);for(var j =1; j < subArray.length; j++){if(subArray[i].indexOf('×')!=-1|| subArray[i].indexOf('÷')!=-1)
              subSum -=this.calculateMutDiv(subArray[j]);else subSum -=Number(subArray[j]);}
          sum += subSum;}}if(isNagativeNum)return(-sum).toString();elsereturn sum.toString();},// 分块乘除运算calculateMutDiv:function(str){var addArray = str.split('×');var sum =1.0;for(var i =0; i < addArray.length; i++){if(addArray[i].indexOf('÷')==-1&& addArray[i].indexOf('%')==-1){
          sum *=Number(addArray[i]);}elseif(addArray[i].indexOf('%')==-1){var subArray = addArray[i].split('÷');var subSum =Number(subArray[0]);for(var j =1; j < subArray.length; j++){
            subSum /=Number(subArray[j]);}
          sum *= subSum;}else{var subArray = addArray[i].split('%');var subSum =Number(subArray[0]);for(var j =1; j < subArray.length; j++){
            subSum %=Number(subArray[j]);}
          sum *= subSum;}}return sum;},// 运算符结尾isOperatorEnd:function(str){for(var i =0; i <this.data.valiBackOfArray.length; i++){if(str.charAt(str.length -1)==this.data.valiBackOfArray[i])returntrue;}returnfalse;},clickButton:function(event){if(this.data.result ==0){if(event.target.id =='back'|| event.target.id =='C'|| event.target.id =='addSub'|| event.target.id =='%'|| event.target.id =='+'|| event.target.id =='-'|| event.target.id =='×'|| event.target.id =='÷'|| event.target.id =='=')return;this.setData({result: event.target.id
        });}elseif(event.target.id =='back'){this.setData({result:this.data.result.length ==1?'0':this.data.result.substring(0,this.data.result.length -1)});}elseif(event.target.id =='C'){this.setData({result:'0'});}elseif(event.target.id =='addSub'){var r =this.data.result;if(this.isOperatorEnd(r))return;if(r.charAt(0)=='-')this.setData({result: r.replace('-','').replace('(','').replace(')','')});elsethis.setData({result:'-('+ r +')'});}elseif(event.target.id =='%'){this.setData({result:this.data.result + event.target.id
        });}elseif(event.target.id =='='){if(this.isOperatorEnd(this.data.result))return;this.setData({result:this.calculate(this.data.result)});this.setData({completeCalculate:true});}else{if(this.isOperatorEnd(this.data.result)&&this.isOperatorEnd(event.target.id))return;// 结果有小数点，到输入运算符前不能再输入小数点if(this.data.completeCalculate &&this.data.result.indexOf('.')!=-1&& event.target.id =='.')return;for(var i =0; i <this.data.valiBackOfArray.length -1; i++){if(this.data.valiBackOfArray[i]== event.target.id){this.setData({completeCalculate:false});break;}}this.setData({result:this.data.result + event.target.id
        });}}})

以上就是微信小程序计算器的源代码，如有导入问题，一定是没联网