计算器 1160131139 侯佳辉

界面截图：

主要代码片段：

<view class='screen'>

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

</view>

<view class='bottom'>

<view class ="btnGroup">

<button id="{{id1}}" bindtap='clickButton' hover-class='shadow' class='btn-item gray'>电信</button>

<button id="{{id2}}" bindtap='clickButton' hover-class='shadow' class='btn-item gray'>软工</button>

<button id="{{id3}}" bindtap='clickButton' hover-class='shadow' class='btn-item gray'>

<icon type='waiting' size='30' color='#999'></icon>

</button>

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

</view>

<view class ="btnGroup">

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

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

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

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

</view>

<view class ="btnGroup">

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

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

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

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

</view>

<view class ="btnGroup">

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

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

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

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

</view>

<view class ="btnGroup">

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

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

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

</view>

</view>

// pages/cal/cal.js

Page({

data: {

id1:"clear",

id2:"back",

id3:"history",

id4:"div",

id5:"num_7",

id6:"num_8",

id7:"num_9",

id8:"mul",

id9:"num_4",

id10:"num_5",

id11:"num_6",

id12:"sub",

id13:"num_1",

id14:"num_2",

id15:"num_3",

id16:"add",

id17:"0",

id18:"dot",

id19:"equals",

result:"哈尔滨华德学院1160131139",

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 = 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,

});

}

})

page{

background:#424242;

}

.screen{

position:fixed;

bottom:780rpx;

word-wrap:break-word;

width:750rpx;

}

.screen view{

color:#fff;

font-size:30px;

text-align:right;

margin-right:30rpx;

}

.btnGroup{

display:flex;

flex-direction:row

}

.btn-item{

width:189rpx;

text-align:center;

line-height:150rpx;

border-radius:0;

}

.zero{

width:376rpx;

}

icon{

position:absolute;

left:55rpx;

top:37rpx;

}

.white{

background:#778899;

}

.orange{

background:#8deeee;

}

.gray{

background:#836fff;

}

.bottom{

position:fixed;

bottom:0;

}

button::after{

border-radius:0;

}

.shadow{

background:#999;

}