文章轉載的
1、calc.wxss
/* */

.content{

height:100%;

display: flex;

flex-direction: column;

align-items:center;

box-sizing: border-box;

background:#555;

padding:30rpx 0 20rpx 0;

}

.scr{

background:#fff;

width:700rpx;

height: 175rpx;

line-height: 175rpx;

text-align: right;

margin:0 0 10rpx 0;

padding:0 10rpx 0 0;

font-size:50px;

}

.btnGroup{

display: flex;

flex-direction: row;

}

.item{

width:175rpx;

min-height: 175rpx;

margin: 1rpx;

text-shadow:0 1px 1px rgba(255,255,255,.3);

text-align: center;

line-height: 175rpx;

}

.gray{

background:#eee;

}

.orange{

color:#fff;

background:#f60;

}

2、calc.js
Page({

data: {

b01: "back",

b02: "clear",

b03: "negative",

b04: "+",

b05: "9",

b06: "8",

b07: "7",

b08: "-",

b09: "6",

b10: "5",

b11: "4",

b12: "×",

b13: "3",

b14: "2",

b15: "1",

b16: "÷",

b17: "0",

b18: ".",

b19: "sqrt",

b20: "=",

screenData: "0",

lastOperator: false,

arr: [],

logs: []

},

clickBtn: function (event) {

console.log(event.target.id);

var id = event.target.id;

switch (id) {

  case "back":

    //退格

    var data = this.data.screenData;

    if (data == 0) {

      return;

    }

    data = data.substring(0, data.length - 1);

    if (data == "" || data == "-") {

      data = 0;

    }

    this.setData({

      screenData: data

    });

    this.data.arr.pop();

    break;

  case "clear":

    //清屏

    this.setData({

      screenData: "0"

    });

    this.data.arr.length = 0;

    break;

  case "negative":

    //正负号

    var data = this.data.screenData;

    if (data == 0) {

      return;

    }

    var firstword = data.substring(0, 1);

    if (firstword == "-") {

      data = data.substring(1, data.length);

      this.data.arr.shift();

    } else {

      data = "-" + data;

      this.data.arr.unshift("-");

    }

    this.setData({

      screenData: data

    });

    break;

  case "=":

    //等号=

    var data = this.data.screenData;

    if (data == 0) {

      return;

    }

    var lastWord = data.substring(data.length - 1, data.length);

    if (isNaN(lastWord)) {

      return;

    }

    var num = "";

    var lastOperator;

    var arr = this.data.arr;

    var optarr = [];

    for (var i in arr) {

      if (isNaN(arr[i]) == false || arr[i] == this.data.b18 || arr[i] == this.data.b03) {

        num += arr[i];

      } else {

        lastOperator = arr[i];

        optarr.push(num);

        optarr.push(arr[i]);

        num = "";

      }

    }

    optarr.push(Number(num));

    var result = Number(optarr[0]) * 1.0;

    console.log(result);

    for (var i = 1; i < optarr.length; i++) {

      if (isNaN(optarr[i])) {

        if (optarr[1] == this.data.b04) {

          result += Number(optarr[i + 1]);

        } else if (optarr[1] == this.data.b08) {

          result -= Number(optarr[i + 1]);

        } else if (optarr[1] == this.data.b12) {

          result *= Number(optarr[i + 1]);

        } else if (optarr[1] == this.data.b16) {

          result /= Number(optarr[i + 1]);

        }

      }

    }

    //

    this.data.arr.length = 0;

    this.data.arr.push(result);

    this.setData({

      screenData: result + ""

    });

    break;

  default:

    if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {

      if (this.data.lastOperator == true || this.data.screenData == 0) {

        return;

      }

    }

    var num = this.data.screenData;

    var data;

    if (num == 0) {

      data = id;

    } else {

      data = num + id;

    }

    this.setData({

      screenData: data

    });

    this.data.arr.push(id);

    if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {

      this.setData({

        lastOperator: true

      });

    } else {

      this.setData({

        lastOperator: false

      });

    }

    break;

}

},

getSqrt: function () {

//平方根

var data = Math.sqrt(this.data.screenData);

this.setData({

  screenData: data

});

}

})

3、calc.wxml
<view class='content'>

<view class='scr'>

{{screenData}}

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b01}}'>←</view>

<view class='item gray' bindtap='clickBtn' id='{{b02}}'>C </view>

<view class='item gray' bindtap='clickBtn' id='{{b03}}'> +/- </view>

<view class='item gray' bindtap='clickBtn' id='{{b04}}'>+</view>

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b05}}'> 9</view>

<view class='item gray' bindtap='clickBtn' id='{{b06}}'> 8 </view>

<view class='item gray' bindtap='clickBtn' id='{{b07}}'> 7 </view>

<view class='item gray' bindtap='clickBtn' id='{{b08}}'>-</view>

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b09}}'> 6</view>

<view class='item gray' bindtap='clickBtn' id='{{b10}}'> 5 </view>

<view class='item gray' bindtap='clickBtn' id='{{b11}}'> 4 </view>

<view class='item gray' bindtap='clickBtn' id='{{b12}}'>×</view>

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b13}}'> 3</view>

<view class='item gray' bindtap='clickBtn' id='{{b14}}'> 2 </view>

<view class='item gray' bindtap='clickBtn' id='{{b15}}'> 1</view>

<view class='item gray' bindtap='clickBtn' id='{{b16}}'>÷</view>

</view>

<view class='btnGroup'>

<view class='item gray'bindtap='clickBtn' id='{{b17}}' > 0</view>

<view class='item gray'bindtap='clickBtn' id='{{b18}}'> . </view>

<view class='item gray'bindtap='getSqrt' id='{{b19}}'> √</view>

<view class='item orange'bindtap='clickBtn' id='{{b20}}'>=</view>

</view>

</view>

4、app.json
{
"pages": [
"pages/calc/calc",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}