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

佚名 6年前 (2019-05-08) 随笔 1444人围观抢沙发百度已收录

<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; }