微信小程序 简易计算器实现代码实例

<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>

/* 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;}

// 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  }); }})

{ "navigationBarBackgroundColor": "#FF9900", "navigationBarTitleText": "EN计算器", "usingComponents": {}}