微信小程序——简单的计算器

只能进行简单的运算

效果图如下：

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

/* 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": {}
}

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