这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

只能进行简单的运算

效果图如下：

cal.wxml

<view class="screen">{{result}}</view><view class="content"> <view class="buttonGroup"> <button id="{{id1}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">清除</button> <button id="{{id2}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">回退</button> <button id="{{id3}}" bindtap="time" class="buttonitem color1" hover-class="shadow"> <icon type="waiting" color="#66CC33"></icon> </button> <button id="{{id4}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">÷</button> </view> <view class="buttonGroup"> <button id="{{id17}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow7">7</button> <button id="{{id18}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow8">8</button> <button id="{{id19}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow9">9</button> <button id="{{id5}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">×</button> </view> <view class="buttonGroup"> <button id="{{id14}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow4">4</button> <button id="{{id15}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow5">5</button> <button id="{{id16}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow6">6</button> <button id="{{id6}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">-</button> </view> <view class="buttonGroup"> <button id="{{id11}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow1">1</button> <button id="{{id12}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow2">2</button> <button id="{{id13}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow3">3</button> <button id="{{id7}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">+</button> </view> <view class="buttonGroup"> <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color3" hover-class="shadow0">0</button> <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color2" hover-class="shadow1">.</button> <button id="{{id9}}" bindtap="equal" class="buttonitem1 color2" hover-class="shadow1">=</button> </view></view>

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.jsPage({ 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": {}}

其中有一些小错误，望大神指正！！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。