一个初入IC的硅农，硬件编程经验3个月。偶然接触了微信小程序编程，然后自己写了一个计算器，希望得到改进意见。
功能：
1、计算 + - * /和%；
2、主要是当得出结果的时候，可以显示原来的数都是什么。用手机上的计算器都是一按等于号，我的两个操作数也没了，很烦。所以自己写的时候就在得到结果的时候操作数不变。
计算器样子就是下面这样子：
样子不太会设计，主要是js部分啦。
WXML代码
由于wxml的很多方法和属性我都还不太了解，所以有的设置方法可能显得繁琐。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!--pages/caculator/caculator.wxml--> <!-- 计算区 --> <view class="caculatorArea"> <!-- 显示数据与运算符 --> <view class="dataArea1">{{firstNum}}</view> <view class="dataArea2">{{operatorShow}}</view> <view class="dataArea3">{{secondNum}}</view> <!-- 显示结果 --> <view class="resultArea">result: {{result}}</view> </view> <!-- 输入区 --> <view class="inputArea"> <!-- 按键第一排 --> <view class="fstRaw"> <button class="clear" bindtap="clearEvent" data-value="C" >C</button> <button class="divide" bindtap="opEvent" data-value="/">/</button> <button class="mutiply" bindtap="opEvent" data-value="*">*</button> <button class="back" bindtap="backEvent" data-value="←">←</button> </view> <!-- 按键第二排 --> <view class="secRaw"> <button class="seven" bindtap="numEvent" data-value="7">7</button> <button class="eight" bindtap="numEvent" data-value="8" >8</button> <button class="nine" bindtap="numEvent" data-value="9">9</button> <button class="minus" bindtap="opEvent" data-value="-">-</button> </view> <!-- 按键第三排 --> <view class="thdRaw"> <button class="four" bindtap="numEvent" data-value="4">4</button> <button class="five" bindtap="numEvent" data-value="5">5</button> <button class="six" bindtap="numEvent" data-value="6">6</button> <button class="plus" bindtap="opEvent" data-value="+">+</button> </view> <!-- 按键第四排 --> <view class="forRaw"> <button class="one" bindtap="numEvent" data-value="1">1</button> <button class="two" bindtap="numEvent" data-value="2">2</button> <button class="three" bindtap="numEvent" data-value="3">3</button> <button class="equal" bindtap="opEvent" data-value="=">=</button> </view> <!-- 按键第五排 --> <view class="fifRaw"> <button class="abs" bindtap="opEvent" data-value="%">%</button> <button class="zero" bindtap="numEvent" data-value="0">0</button> <button class="dot" bindtap="dotEvent" data-value=".">.</button> </view> </view> |
js代码
这个代码是真的让我快崩了，最后达到的效果，能跑就行。。由于软件的代码写的很少，所以在一些判断的时候显得很繁琐。比如如何区分目前输入的数字是属于第一个操作数还是第二个操作数（因为我想在两行显示数字，因此这就成了一个问题），我的办法是设置了一个flag，请问有没有知道更简单的方法的？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 |
Page({ data:{ result:"", firstNum:"", secondNum:"", operatorUse:"", operatorShow:"", }, var rst="" numFlag:true, optContinue:false, resultFlag:false, // 结果标志位 1代表有结果，0代表没结果 fstIsClear:true, // 第一个数字是否清除标志位 1代表前面没数，0代表有数 secIsClear:true, //第二个数字是否清除的标志位 1代表前面没数，0代表有数 numEvent(n){ let numValue=n.currentTarget.dataset.value; if(this.resultFlag==true){ //如果得出了结果，并且按数字键的话，那么直接进行下一个计算，当前计算结束 this.setData({ firstNum:numValue, secondNum:"", secIsClear:true, operatorShow:"", operatorUse:"" }) this.resultFlag=false }else if(this.numFlag==true){ //如果此时没有按操作符，则归为第一个数 if(this.data.firstNum=="0"){ //假如第一个数现在是0，那么0不进行保存 this.setData({ firstNum:numValue }); }else{ //如果第一个数不是0，那么进行拼接 this.setData({ firstNum:this.data.firstNum+numValue }); this.fstIsClear=false; }}else{ //如果此时已经按过操作符，则归为第二个数 if(this.data.secondNum=="0"){//假如第二个数现在是0，那么0不进行保存 this.setData({ secondNum:numValue }); }else{ this.setData({ secondNum:this.data.secondNum+numValue }); this.secIsClear=false; } } }, opEvent(o){ let optLast=this.data.operatorUse; let optCurrent=o.currentTarget.dataset.value; if(optCurrent!=null && this.data.secondNum=="" && this.data.fisrtdNum==""){ this.numFlag=true; //都为空时，连续点击操作符不更换数字顺序 }else if(optCurrent!=null && this.data.secondNum=="" && this.data.fisrtdNum!=""){ if(optCurrent=="="){ this.numFlag=true; }else{ this.numFlag=false;//1有数2没数时，连续点击操作符，再次点击数字归为第二个 } } else if(optCurrent!=null && this.data.secondNum!=""&& this.data.fisrtdNum!=""){ if(optCurrent=="="){ this.numFlag=!this.numFlag; //都不为空时，点击操作符后，数字绑定的顺序改变 }else{ this.numFlag=false; } } if(optLast=="="){ this.setData({ firstNum:rst, secondNum:"", secIsClear:true, result:"" }); this.resultFlag=false; } rst=Number(this.data.firstNum) //将第一个数转换为数字类型 var secNum=Number(this.data.secondNum) //将第二个数转换为数字类型
this.setData({ operatorUse:optCurrent //得到操作符,用于js判断 }); if(optCurrent=="="){ //得到操作符，用于wxml显示 if(optLast!="="){ this.setData({ operatorShow:optLast }); }else{ this.setData({ operatorShow:"" }); } }else{ this.setData({ operatorShow:optCurrent }) } if(optLast=="+"){ //依据操作符进行操作 rst=rst+secNum; }else if(optLast=="-"){ rst=rst-secNum ; }else if(optLast=="*"){ rst=rst*secNum; }else if(optLast=="/"){ rst=rst/secNum; }else if(optLast=="%"){ rst=rst%secNum; } if(optCurrent=="="){ //当输入的操作符为=时，进行结果显示 this.setData({ result:rst }) this.resultFlag=true } if(optCurrent!="=" && optLast!=""){ this.setData({ firstNum:rst, secondNum:"", secIsClear:true, result:"" }); this.resultFlag=false; //表明此时有结果了 this.optContinue=true; //表明要进行连续计算了 } }, dotEvent(){ if(this.numFlag==true){ if(this.fstIsClear==true){ this.fstIsClear==false this.setData({ firstNum:"0." }); }else{ //如果此前有数，则输入.为. if(this.data.firstNum.indexOf(".")>0){ return; }else{ this.setData({ firstNum:this.data.firstNum+"." }); } } }else{ if(this.secIsClear==true){ this.secIsClear==false this.setData({ secondNum:"0." }) }else{ if(this.data.secondNum.indexOf(".")>0){ return; }else{ this.setData({ secondNum:this.data.secondNum+"." }) } } } }, backEvent(){ var fstNumDel=0; var secNumDel=0; if(this.resultFlag==true){ return; }else{ if(this.numFlag==true){ fstNumDel=this.data.firstNum.substr(0,this.data.firstNum.length-1); this.setData({ firstNum:fstNumDel }); if(this.data.firstNum==""){ this.fstIsClear=true; } }else{ secNumDel=this.data.secondNum.substr(0,this.data.secondNum.length-1); this.setData({ secondNum:secNumDel }); if(this.data.secondNum==""){ this.secIsClear=true; } } }
}, clearEvent(){ this.setData({ firstNum:"", secondNum:"", operatorUse:"", operatorShow:"", result:"" }) this.numFlag=true; this.resultFlag=false; this.isClear=true; this.fstIsClear=true; this.secIsClear=true; }
}) |
