计算器

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

id1: "clear",

id2: "back",

id3: "div",

id4: "num_7",

id5: "num_8",

id6: "num_9",

id7: "mul",

id8: "num_4",

id9: "num_5",

id10: "num_6",

id11: "sub",

id12: "num_1",

id13: "num_2",

id14: "num_3",

id15: "add",

id16: "num_0",

id17: "dot",

id18: "equals",

result: "0",

dotSign: false,

},

clickButton: function (e) {

console.log(e);

var btnValue = e.target.id;

var res = this.data.result;

var newDotSign = this.data.dotSign;

if (btnValue >= "num_0" && btnValue <= "num_9") {

var num = btnValue.split('_')[1];

if (res == "0" || res.charAt(res.length - 1) == '@') {

res = num;

}

else {

res = res + num;

}

}

else {

if (btnValue == "dot") {

if (!newDotSign) {

res = res + '.';

newDotSign = true;

}

}

else if (btnValue == "clear") {

res = "0";

newDotSign = false;

}

else if (btnValue == "back") {

var length = res.length;

if (length > 1) {

res = res.substr(0, length - 1);

}

else {

res = "0";

}

}

else if (btnValue == "add" || btnValue == "sub" || btnValue == "mul" || btnValue == "div") {

newDotSign = false;

var sign;

switch (btnValue) {

case "add":

sign = '+';

break;

case "sub":

sign = '-';

break;

case "mul":

sign = '*';

break;

case "div":

sign = '/';

break;

}

if (!isNaN(res.charAt(res.length - 1))) {

res = res + sign;

}

}

}

this.setData({

result: res,

dotSign: newDotSign,

});

},

equals: function () {

var str = this.data.result;

var strArr = [];

var item = '';

var temp = 0;

for (var i = 0; i <= str.length; i++) {

var ch = str.charAt(i);

if ((ch != '' && ch >= 0 && ch <= 9) || ch == '.') {

item = item + ch;

}

else {

strArr[temp] = item;

temp++;

strArr[temp] = ch;

temp++;

item = '';

}

}

if (isNaN(strArr[strArr.length - 1])) {

strArr.pop();

}

var res = strArr[0] * 1;

var num;

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

if (res == '@') {

break;

}

num = strArr[i + 1] * 1;

switch (strArr[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;

}

}

this.setData({

result: '=' + res,

})

}

})

然后在index.wxml

<view class = "screen">

<view>{{result}}</view>

</view>

<view class = "bottom">

<view class="btnGroup">

<button id="{{id1}}" bindtap='clickButton' class = "btn-item zero gray">清除(311郭固亮)</button>

<button id="{{id2}}" bindtap='clickButton' class = "btn-item gray">回退</button>

<button id="{{id3}}" bindtap='clickButton' class = "btn-item orange">/</button>

</view>

<view class="btnGroup">

<button id="{{id4}}" bindtap='clickButton' class = "btn-item white">7</button>

<button id="{{id5}}" bindtap='clickButton' class = "btn-item white">8</button>

<button id="{{id6}}" bindtap='clickButton' class = "btn-item white">9</button>

<button id="{{id7}}" bindtap='clickButton' class = "btn-item orange">*</button>

</view>

<view class="btnGroup">

<button id="{{id8}}" bindtap='clickButton' class = "btn-item white">4</button>

<button id="{{id9}}" bindtap='clickButton' class = "btn-item white">5</button>

<button id="{{id10}}" bindtap='clickButton' class = "btn-item white">6</button>

<button id="{{id11}}" bindtap='clickButton' class = "btn-item orange">-</button>

</view>

<view class="btnGroup">

<button id="{{id12}}" bindtap='clickButton' class = "btn-item white">1</button>

<button id="{{id13}}" bindtap='clickButton' class = "btn-item white">2</button>

<button id="{{id14}}" bindtap='clickButton' class = "btn-item white">3</button>

<button id="{{id15}}" bindtap='clickButton' class = "btn-item orange">+</button>

</view>

<view class="btnGroup">

<button id="{{id16}}" bindtap='clickButton' class = "btn-item zero white" >0</button>

<button id="{{id17}}" bindtap='clickButton' class = "btn-item white">.</button>

<button id="{{id18}}" bindtap='equals' class = "btn-item orange">=</button>

</view>

</view>

最后是index.wxss

page{

background-color: #000;

}

.screen{

position: fixed;

bottom: 780rpx;

word-wrap:break-word;

width: 750rpx;

}

.white{

background:#EFEFED;

}

.orange{

background: #FC9504;

}

.gray{

background: #CFCFCF;

}

.screen view{

color: #fff;

font-size: 30px;

text-align: right;

}

.btnGroup{

display: flex;

flex-direction: row;

margin-right: 30px;

}

.btn-item{

width: 188rpx;

text-align: center;

line-height: 150rpx;

border-radius: 0;

}

.zero{

width: 376rpx;

}

.bottom{

position: fixed;

bottom: 0;

}