这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
只能进行简单的运算
效果图如下：
cal.wxml
<view>{{result}}</view> <view> <view> <button bindtap="clickButton" hover-class="shadow">清除</button> <button bindtap="clickButton" hover-class="shadow">回退</button> <button bindtap="time" hover-class="shadow"> <icon type="waiting" color="#66CC33"></icon> </button> <button bindtap="clickButton" hover-class="shadow1">÷</button> </view> <view> <button bindtap="clickButton" hover-class="shadow7">7</button> <button bindtap="clickButton" hover-class="shadow8">8</button> <button bindtap="clickButton" hover-class="shadow9">9</button> <button bindtap="clickButton" hover-class="shadow1">×</button> </view> <view> <button bindtap="clickButton" hover-class="shadow4">4</button> <button bindtap="clickButton" hover-class="shadow5">5</button> <button bindtap="clickButton" hover-class="shadow6">6</button> <button bindtap="clickButton" hover-class="shadow1">-</button> </view> <view> <button bindtap="clickButton" hover-class="shadow1">1</button> <button bindtap="clickButton" hover-class="shadow2">2</button> <button bindtap="clickButton" hover-class="shadow3">3</button> <button bindtap="clickButton" hover-class="shadow1">+</button> </view> <view> <button bindtap="clickButton" hover-class="shadow0">0</button> <button bindtap="clickButton" hover-class="shadow1">.</button> <button bindtap="equal" hover-class="shadow1">=</button> </view> </view>
cal.wxss
/* pages/cal/cal.wxss */ page{ background: #000000; } .screen{ position: fixed; color: #ffffff; font-size: 30px; bottom: 780rpx; text-align: right; width: 730rpx; word-wrap: break-word; } .content{ position: fixed; bottom: 0; } .buttonGroup{ display: flex; flex-direction: row; } .buttonitem{ text-align: center; line-height: 148rpx; width: 192rpx; border-radius: 0; } .buttonitem1{ width: 255rpx; text-align: center; line-height: 148rpx; border-radius: 0; } icon{ position: absolute; top: 30rpx; left: 67rpx; } .color1{ background: #CCFF99; } .color2{ background: #FFFF99; } .color3{ background: rgb(167, 223, 241); } .shadow{ background: #88e676; } .shadow0{ background: rgb(149, 118, 243); } .shadow1{ background: #FFCC66; } .shadow2{ background: #99FF00; } .shadow3{ background: #FF9999; } .shadow4{ background: #00CC66; } .shadow5{ background: #00CCFF; } .shadow6{ background: rgb(248, 80, 80); } .shadow7{ background: #FFCCFF; } .shadow8{ background: #CCCCCC; } .shadow9{ background: #CCFFFF; }
cal.js
// pages/cal/cal.js Page({ data: { result:"0", id1:"clear", id2:"back", id3:"time", id4:"div", id5:"mul", id6:"sub", id7:"add", id8:"dot", id9:"eql", id10:"num_0", id11:"num_1", id12:"num_2", id13:"num_3", id14:"num_4", id15:"num_5", id16:"num_6", id17:"num_7", id18:"num_8", id19:"num_9", buttonDot:false, }, clickButton: function (e) { console.log(e); var buttonVal = e.target.id; var res = this.data.result; var newbuttonDot=this.data.buttonDot; var sign; if (buttonVal >= "num_0" && buttonVal <= "num_9") { var num=buttonVal.split('_')[1]; if (res == "0" || res.charAt(res.length -(length-1)) == "=") { res = num; } else { res = res + num; } } else{ if(buttonVal=="dot") { if(!newbuttonDot) { res = res + '.'; } } else if(buttonVal=="clear") { res='0'; } else if(buttonVal=="back") { var length=res.length; if(length>1) { res=res.substr(0,length-1); } else{ res='0'; } } else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add") { switch(buttonVal){ case "div": sign ='÷'; break; case "mul": sign ='×'; break; case "sub": sign='-'; break; case "add": sign='+'; break; } if(!isNaN(res.charAt(res.length-1))) { res=res+sign; } } } this.setData({ result: res, buttonDot:newbuttonDot, }); }, equal: function(e){ var str=this.data.result; var item= ''; var strArray = []; var temp=0; for(var i=0;i<=str.length;i++){ var s=str.charAt(i); if((s!='' && s>='0' && s<='9') || s=='.'){ item=item+s; } else{ strArray[temp]=item; temp++; strArray[temp]=s; temp++; item=''; } } if(isNaN(strArray[strArray.length-1])) { strArray.pop(); } var num; var res=strArray[0]*1; for(var i=1;i<=strArray.length;i=i+2){ num=strArray[i+1]; switch(strArray[i]){ case "-": res = res - num; break; case "+": res = res + num; break; case "×": res = res * num; break; case "÷": if(num!='0') { res = res / num; } else { res ='∞'; break; } break; } } this.setData({ result:'='+res, }); }, time:function(e){ var util=require("../../utils/util.js"); var time=util.formatTime(new Date()); this.setData({ result:time }); } })
cal.json
{ "navigationBarBackgroundColor": "#FF9900", "navigationBarTitleText": "EN计算器", "usingComponents": {} }
其中有一些小错误，望大神指正！！！！