微信小程序计算器
index.wxml
html
<view class='screen'>{{result}}</view>
<view class='test-bg'>
<view class='btnGroup'>
<view class='item grey' bindtap='clickButton' id="{{C}}">AC</view>
<view class='item grey' bindtap='clickButton' id="{{addSub}}">+/-</view>
<view class='item grey' bindtap='clickButton' id="{{percent}}">%</view>
<view class='item brown' bindtap='clickButton' id="{{div}}">÷</view>
</view>
<view class='btnGroup'>
<view class='item black' bindtap='clickButton' id="{{id7}}">7</view>
<view class='item black' bindtap='clickButton' id="{{id8}}">8</view>
<view class='item black' bindtap='clickButton' id="{{id9}}">9</view>
<view class='item brown' bindtap='clickButton' id="{{mut}}">×</view>
</view>
<view class='btnGroup'>
<view class='item black' bindtap='clickButton' id="{{id4}}">4</view>
<view class='item black' bindtap='clickButton' id="{{id5}}">5</view>
<view class='item black' bindtap='clickButton' id="{{id6}}">6</view>
<view class='item brown' bindtap='clickButton' id="{{sub}}">-</view>
</view>
<view class='btnGroup'>
<view class='item black' bindtap='clickButton' id="{{id1}}">1</view>
<view class='item black' bindtap='clickButton' id="{{id2}}">2</view>
<view class='item black' bindtap='clickButton' id="{{id3}}">3</view>
<view class='item brown' bindtap='clickButton' id="{{add}}">+</view>
</view>
<view class='btnGroup'>
<view class='item0 black' bindtap='clickButton' id="{{id0}}">0</view>
<view class='item black' bindtap='clickButton' id="{{dot}}">.</view>
<view class='item brown' bindtap='clickButton' id="{{equ}}">=</view>
</view>
</view>index.wxss
css
page {
width: 100%;
height: 100%;
background-color: black;
}
.test-bg {
position: fixed;
bottom: 0;
}
.screen {
position: fixed;
color: #fbfbfb;
font-size: 50px;
bottom: 850rpx;
text-align: right;
width: 730rpx;
word-wrap: break-word;
}
.btnGroup {
display: flex;
/*弹性显示结构*/
flex-direction: row;
/*横向显示*/
}
.item {
width: 150rpx;
height: 150rpx;
line-height: 150rpx;
border-radius: 100%;
text-align: center;
margin-right: 40rpx;
margin-bottom: 8rpx;
margin-left: 8rpx;
}
.brown {
/* 前景色 */
color: #000000;
font-size: 50rpx;
/* border: solid 1rpx #ffffff; */
/* 背景色 */
background-color: #a5a5a5;
}
.black {
/* 前景色 */
color: #fefefe;
font-size: 65rpx;
/* border: solid 1rpx #ffffff; */
/* 背景色 */
background: #333333;
}
.grey {
/* 前景色 */
color: #fbfbfb;
font-size: 50rpx;
/* 背景色 */
background: #a5a5a5;
}
.item0 {
width: 350rpx;
line-height: 180rpx;
border-radius: 175rpx;
text-align: center;
margin-right: 40rpx;
}index.js文件
javascript
Page({
data: {
C: 'C',
addSub: 'addSub',
add: '+',
sub: '-',
mut: '×',
div: '÷',
equ: '=',
percent: '%',
dot: '.',
id0: '0',
id1: '1',
id2: '2',
id3: '3',
id4: '4',
id5: '5',
id6: '6',
id7: '7',
id8: '8',
id9: '9',
result: '0',
valiBackOfArray: ['+', '-', '×', '÷', '.'],
completeCalculate: false
},
// 计算结果
calculate: function (str) {
// 判断负数
var isNagativeNum = false;
if (str.charAt(0) == '-') {
str = str.replace('-', '').replace('(', '').replace(')', '');
isNagativeNum = true;
}
// 字符串解析
var addArray = str.split('+');
var sum = 0.0;
for (var i = 0; i < addArray.length; i++) {
if (addArray[i].indexOf('-') == -1) {
if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1 || addArray[i].indexOf('%') != -1)
sum += this.calculateMutDiv(addArray[i]);
else sum += Number(addArray[i]);
} else {
var subArray = addArray[i].split('-');
var subSum = 0;
if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1 || subArray[0].indexOf('%') != -1) subSum = this.calculateMutDiv(subArray[0]);
else subSum = Number(subArray[0]);
for (var j = 1; j < subArray.length; j++) {
if (subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1)
subSum -= this.calculateMutDiv(subArray[j]);
else subSum -= Number(subArray[j]);
}
sum += subSum;
}
}
if (isNagativeNum) return (-sum).toString();
else return sum.toString();
},
// 分块乘除运算
calculateMutDiv: function (str) {
var addArray = str.split('×');
var sum = 1.0;
for (var i = 0; i < addArray.length; i++) {
if (addArray[i].indexOf('÷') == -1 && addArray[i].indexOf('%') == -1) {
sum *= Number(addArray[i]);
} else if (addArray[i].indexOf('%') == -1) {
var subArray = addArray[i].split('÷');
var subSum = Number(subArray[0]);
for (var j = 1; j < subArray.length; j++) {
subSum /= Number(subArray[j]);
}
sum *= subSum;
} else {
var subArray = addArray[i].split('%');
var subSum = Number(subArray[0]);
for (var j = 1; j < subArray.length; j++) {
subSum %= Number(subArray[j]);
}
sum *= subSum;
}
}
return sum;
},
// 运算符结尾
isOperatorEnd: function (str) {
for (var i = 0; i < this.data.valiBackOfArray.length; i++) {
if (str.charAt(str.length - 1) == this.data.valiBackOfArray[i]) return true;
}
return false;
},
clickButton: function (event) {
if (this.data.result == 0) {
if (event.target.id == 'back' || event.target.id == 'C' || event.target.id == 'addSub' || event.target.id == '%' || event.target.id == '+' || event.target.id == '-' || event.target.id == '×' || event.target.id == '÷' || event.target.id == '=') return;
this.setData({
result: event.target.id
});
} else if (event.target.id == 'back') {
this.setData({
result: this.data.result.length == 1 ? '0' : this.data.result.substring(0, this.data.result.length - 1)
});
} else if (event.target.id == 'C') {
this.setData({
result: '0'
});
} else if (event.target.id == 'addSub') {
var r = this.data.result;
if (this.isOperatorEnd(r)) return;
if (r.charAt(0) == '-') this.setData({
result: r.replace('-', '').replace('(', '').replace(')', '')
});
else this.setData({
result: '-(' + r + ')'
});
} else if (event.target.id == '%') {
this.setData({
result: this.data.result + event.target.id
});
} else if (event.target.id == '=') {
if (this.isOperatorEnd(this.data.result)) return;
this.setData({
result: this.calculate(this.data.result)
});
this.setData({
completeCalculate: true
});
} else {
if (this.isOperatorEnd(this.data.result) && this.isOperatorEnd(event.target.id)) return;
// 结果有小数点，到输入运算符前不能再输入小数点
if (this.data.completeCalculate && this.data.result.indexOf('.') != -1 && event.target.id == '.') return;
for (var i = 0; i < this.data.valiBackOfArray.length - 1; i++) {
if (this.data.valiBackOfArray[i] == event.target.id) {
this.setData({
completeCalculate: false
});
break;
}
}
this.setData({
result: this.data.result + event.target.id
});
}
}
})以上就是微信小程序计算器的源代码，如有导入问题，一定是没联网