微信小程序开发简易计算器

<!--pages/num/num.wxml-->

<!-- <text>计算器功能需求</text> -->

<view class='content'>

<view class='screen'>{{result}}</view>

<view class="btnGroup">

<button class='item orange' hover-class='other-button-hover' id='{{id1}}' bindtap='clickButton'>历史</button>

<button class='item orange' hover-class='other-button-hover' id='{{id2}}' bindtap='clickButton'>C</button>

<button class='item orange' hover-class='other-button-hover' id='{{id3}}' bindtap='clickButton'>删除</button>

<button class='item orange' hover-class='other-button-hover' id='{{id4}}' bindtap='clickButton'>除法</button>

</view>

<view class="btnGroup">

<button class='item blue' hover-class='button-hover-num' id='{{id5}}' bindtap='clickButton'>7</button>

<button class='item blue' hover-class='button-hover-num' id='{{id6}}' bindtap='clickButton'>8</button>

<button class='item blue' hover-class='button-hover-num' id='{{id7}}' bindtap='clickButton'>9</button>

<button class='item orange' hover-class='other-button-hover' id='{{id8}}' bindtap='clickButton'>乘法</button>

</view>

<view class="btnGroup">

<button class='item blue' hover-class='button-hover-num' id='{{id9}}' bindtap='clickButton'>4</button>

<button class='item blue' hover-class='button-hover-num' id='{{id10}}' bindtap='clickButton'>5</button>

<button class='item blue' hover-class='button-hover-num' id='{{id11}}' bindtap='clickButton'>6</button>

<button class='item orange' hover-class='other-button-hover' id='{{id12}}' bindtap='clickButton'>减法</button>

</view>

<view class="btnGroup">

<button class='item blue' hover-class='button-hover-num' id='{{id13}}' bindtap='clickButton'>1</button>

<button class='item blue' hover-class='button-hover-num' id='{{id14}}' bindtap='clickButton'>2</button>

<button class='item blue' hover-class='button-hover-num' id='{{id15}}' bindtap='clickButton'>3</button>

<button class='item orange' hover-class='other-button-hover' id='{{id16}}' bindtap='clickButton'>加法</button>

</view>

<view class="btnGroup">

<button class='item orange' hover-class='other-button-hover' id='{{id17}}' bindtap='clickButton'>加/减</button>

<button class='item blue' hover-class='button-hover-num' id='{{id18}}' bindtap='clickButton'>0</button>

<button class='item blue' hover-class='button-hover-num' id='{{id19}}' bindtap='clickButton'>.</button>

<button class='item orange' hover-class='other-button-hover' id='{{id20}}' bindtap='clickButton'>=</button>

</view>

</view>

 

 

data: {

result:"0",

id1:"history",

id2:"clear",

id3:"back",

id4:"div",

id5:"num_7",

id6: "num_8",

id7: "num_9",

id8: "mu1",

id9: "num_4",

id10: "num_5",

id11: "num_6",

id12: "sub",

id13: "num_1",

id14: "num_2",

id15: "num_3",

id16: "add",

id17: "negative",

id18: "num_0",

id19:"dot",

id20:"equ"

},

clickButton:function(e){

var data = this.data.result;

if(e.target.id >= 'num_0' && e.target.id <= 'num_9'){

data += e.target.id.split("_")[1];

if(this.data.result == '0'){

data = e.target.id.split("_")[1];

}

}else{

console.log(e.target.id);

}

this.setData({

result:data

})

},

 

 

 

 

/* pages/num/num.wxss */

.btnGroup{

display: flex;

flex-direction:row;

}

.item{

width:160rpx;

min-height:150rpx;

margin:10rpx;

text-shadow: 0 1px 1px rgba(0,0,0, 0.3);

border-radius:5px;

text-align:center;

line-height:150rpx;

}

.content{

height: 100%;

display:flex;

flex-direction:column;

align-items:center;

box-sizing:border-box;

padding-top:10rpx;

}

.screen{

">;

text-align:right;

width:650rpx;

height:150rpx;

line-height:150rpx;

padding:0 20rpx;

margin:30rpx;

border:1px solid #ddd;

border-radius:3px;

}

.orange{

">;

color:#fef4e9;

border:solid 1px #da7c0c;

}

.blue{

">;

color:#d9eef7;

border:solid 1px #0076a3;

}

.button-hover-num{

">;

opacity: 0.7;

}

.other-buttonn-hover{

">red;

}