百度智能小程序计算器代码
时间: 2024-05-02 13:16:55 浏览: 23
以下是一个简单的百度智能小程序计算器代码,您可以根据需要进行修改和优化:
```js
//index.js
Page({
data: {
screenData: '',
result: '',
lastIsOperator: false,
arr: []
},
clickBtn: function(event) {
var btnValue = event.target.dataset.value;
var id = event.target.id;
if (btnValue == 'C') {
this.setData({
screenData: '',
result: '',
lastIsOperator: false,
arr: []
});
} else if (btnValue == '=') {
var str = this.data.screenData;
var num = '';
var operator = '';
var result = this.data.result;
for (var i = 0; i < str.length; i++) {
if (isNaN(str[i]) == false || str[i] == '.') {
num += str[i];
} else {
operator = str[i];
if (num != '') {
if (result == '') {
result = parseFloat(num);
} else {
num = parseFloat(num);
if (operator == '+') {
result += num;
} else if (operator == '-') {
result -= num;
} else if (operator == '*') {
result *= num;
} else if (operator == '/') {
result /= num;
}
}
}
operator = str[i];
num = '';
}
}
if (num != '') {
num = parseFloat(num);
if (operator == '+') {
result += num;
} else if (operator == '-') {
result -= num;
} else if (operator == '*') {
result *= num;
} else if (operator == '/') {
result /= num;
}
}
this.setData({
result: result.toString(),
screenData: ''
});
} else {
var screenData = this.data.screenData;
if (btnValue == '+' || btnValue == '-' || btnValue == '*' || btnValue == '/') {
if (this.data.lastIsOperator == true || screenData == '') {
return;
}
this.setData({
lastIsOperator: true
});
} else {
this.setData({
lastIsOperator: false
});
}
this.setData({
screenData: screenData + btnValue
});
}
}
})
```
```html
<!--index.wxml-->
<view class="container">
<view class="screen">{{screenData}}</view>
<view class="result">{{result}}</view>
<view class="row">
<view id="7" data-value="7" class="btn">7</view>
<view id="8" data-value="8" class="btn">8</view>
<view id="9" data-value="9" class="btn">9</view>
<view id="+" data-value="+" class="btn operator">+</view>
</view>
<view class="row">
<view id="4" data-value="4" class="btn">4</view>
<view id="5" data-value="5" class="btn">5</view>
<view id="6" data-value="6" class="btn">6</view>
<view id="-" data-value="-" class="btn operator">-</view>
</view>
<view class="row">
<view id="1" data-value="1" class="btn">1</view>
<view id="2" data-value="2" class="btn">2</view>
<view id="3" data-value="3" class="btn">3</view>
<view id="*" data-value="*" class="btn operator">*</view>
</view>
<view class="row">
<view id="C" data-value="C" class="btn">C</view>
<view id="0" data-value="0" class="btn">0</view>
<view id="." data-value="." class="btn">.</view>
<view id="/" data-value="/" class="btn operator">÷</view>
</view>
<view class="row">
<view id="=" data-value="=" class="btn equal">=</view>
</view>
</view>
```
```css
/*index.wxss*/
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 100rpx;
}
.screen {
font-size: 40rpx;
text-align: right;
margin-bottom: 20rpx;
}
.result {
font-size: 60rpx;
text-align: right;
margin-bottom: 50rpx;
}
.row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.btn {
width: 140rpx;
height: 140rpx;
font-size: 50rpx;
color: #fff;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
}
.operator {
background-color: #f60;
}
.equal {
background-color: #f60;
width: 300rpx;
margin-right: 0;
border-radius: 50rpx;
}
```
使用百度开发者工具创建一个智能小程序项目,并将以上代码复制到对应的文件中,即可运行一个简单的计算器智能小程序。