我爱小程序
// 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: "num_0",
id18: "dot",
id19: "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 = 'x'; 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 'x': res = res * num; break;
case '/': if (num != 0) {
res = res / num;
} else {
res = '错误';
}
break;
}
}
this.setData({
result: res
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<!--pages/cal/cal.wxml-->
<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'>x</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='equals' hover-class='shadow' class='btn-item orange'>=</button>
</view>
</view>
/* pages/cal/cal.wxss */
page{
background: orange;
}
.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: #EFEFED;
}
.orange{
background: #FC9504;
}
.gray{
background: #CFCFCF;
}
.bottom{
position: fixed;
bottom: 0;
}
buttom::after{
border-radius: 0;
}
.shadow{
background: #999;
}