微信小程序-计算器

初次尝试小程序，简单的实现计算器功能

首先：WXML结构

< view class= "content">

< view class= "show-con">

< view class= "result">{{msg}} </ view >

</ view >

< view class= "btn-group">

< view class= "item" bindtap= 'getContent' id= "{{id1}}">AC </ view >

< view class= "item" bindtap= 'getContent' id= "{{id2}}">+/- </ view >

< view class= "item" bindtap= 'getContent' id= "{{id3}}">% </ view >

< view class= "item orange" bindtap= 'getContent' id= "{{id4}}">÷ </ view >

</ view >

< view class= "btn-group">

< view class= "item" bindtap= 'getContent' id= "{{id5}}">7 </ view >

< view class= "item" bindtap= 'getContent' id= "{{id6}}">8 </ view >

< view class= "item" bindtap= 'getContent' id= "{{id7}}">9 </ view >

< view class= "item orange" bindtap= 'getContent' id= "{{id8}}">x </ view >

</ view >

< view class= "btn-group">

< view class= "item" bindtap= 'getContent' id= "{{id9}}">4 </ view >

< view class= "item" bindtap= 'getContent' id= "{{id10}}">5 </ view >

< view class= "item" bindtap= 'getContent' id= "{{id11}}">6 </ view >

< view class= "item orange" bindtap= 'getContent' id= "{{id12}}">- </ view >

</ view >

< view class= "btn-group">

< view class= "item" bindtap= 'getContent' id= "{{id13}}">1 </ view >

< view class= "item" bindtap= 'getContent' id= "{{id14}}">2 </ view >

< view class= "item" bindtap= 'getContent' id= "{{id15}}">3 </ view >

< view class= "item orange" bindtap= 'getContent' id= "{{id16}}">+ </ view >

</ view >

< view class= "btn-group">

< view class= "item zero" bindtap= 'getContent' id= "{{id17}}">0 </ view >

< view class= "item" bindtap= 'getContent' id= "{{id18}}">. </ view >

< view class= "item orange" bindtap= 'getContent' id= "{{id19}}">= </ view >

</ view >

</ view >

其次，WXSS  css表现

/* pages/new/new.wxss */

.content{

width: 100%;

display: flex;

flex-direction: column;

align-items: item;

box-sizing: border-box

}

.show-con{

display: flex;

flex-direction: row;

height: 200 rpx;

background: #000;

border-radius: 10 rpx

}

.result{

height: 300 rpx;

width: 100%;

color: #fff;

font-size: 40 rpx;

text-align: right;

line-height: 300 rpx;

}

.btn-group{

display: flex;

flex-direction: row;

width: 700 rpx;

margin: 10 rpx 20 rpx 0 rpx 20 rpx

}

.item{

display: inline-block;

width: 160 rpx;

height: 160 rpx;

background: #ccc;

border-radius: 50%;

text-align: center;

line-height: 160 rpx;

margin: 8.75 rpx

}

.orange{

color: #fff;

background: #ffd700;

font-weight: bold

}

.zero{

width: 337.5 rpx;

border-radius: 80 rpx

}

最后，js交互

const util = require( '../../utils/util.js')

const rpn = require( '../../utils/rpn.js')

Page({

data:{

msg: '0',

id1: 'AC',

id2: '+/-',

id3: '%',

id4: '÷',

id5: '7',

id6: '8',

id7: '9',

id8: '*',

id9: '4',

id10: '5',

id11: '6',

id12: '-',

id13: '1',

id14: '2',

id15: '3',

id16: '+',

id17: '0',

id18: '.',

id19: '=',

},

getContent: function(e){

var id = e.target.id;

var initData = this.data.msg;

if (id == this.data.id1){

this.setData({

msg: 0

});

} else if( id == this.data.id2){ //取反

if (initData == "0"){

return

}

var firstWord = initData.charAt( 0);

if (firstWord == "-"){

initData = initData.substr( 1);

} else{

initData = "-" + initData;

}

this.setData({

msg: initData

});

} else if(id == this.data.id3){ //百分比运算

if (initData == 0){

return;

} else{

initData = initData/ 100;

this.setData({

msg: initData

});

}

} else if( id == this.data.id19){

//如果只有一个数字且是0，则直接返回

if( initData == 0){

return;

}

//判断最后一位是否为是有效数字

var lastWord = initData.charAt(initData.length - 1);

if (isNaN(lastWord)) {

return;

}

var calData = rpn.calCommonExp(initData);

console.log(calData);

this.setData({

msg: calData

});

}

else{

var total;

if (initData == 0){

total = id

}

else{

total = initData + id;

}

this.setData({

msg: total

});

}

}

})