微信计算机小程序代码,可以显示清零历史结果
时间: 2023-07-09 15:03:36 浏览: 95
微信小程序代码
以下是一个简单的微信计算机小程序代码,可以清零历史结果。
```html
<!--index.wxml-->
<view class="container">
<view class="output">{{output}}</view>
<view class="input">
<input type="text" bindinput="onInput" placeholder="请输入数字或运算符">
<button bindtap="onCalculate">计算</button>
<button bindtap="onClear">清零</button>
</view>
<view class="history">
<text>历史记录:</text>
<view wx:for="{{history}}" wx:key="{{index}}" class="history-item">{{item}}</view>
</view>
</view>
```
```css
/*index.wxss*/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.output {
font-size: 36rpx;
margin-bottom: 20rpx;
}
.input {
display: flex;
flex-direction: row;
align-items: center;
}
.input input {
margin-right: 10rpx;
padding: 10rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
font-size: 28rpx;
width: 300rpx;
}
.input button {
margin-right: 10rpx;
padding: 10rpx;
border-radius: 5rpx;
font-size: 28rpx;
background-color: #1aad19;
color: #fff;
}
.history {
margin-top: 20rpx;
}
.history-item {
margin-right: 10rpx;
padding: 5rpx 10rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
font-size: 24rpx;
display: inline-block;
}
```
```javascript
//index.js
Page({
data: {
output: '',
input: '',
history: [],
},
onInput: function (e) {
this.setData({
input: e.detail.value,
});
},
onCalculate: function () {
const input = this.data.input;
if (!input) {
return;
}
try {
const result = eval(input);
this.setData({
output: result.toFixed(2),
history: [...this.data.history, `${input} = ${result.toFixed(2)}`],
});
} catch (e) {
this.setData({
output: '计算出错',
});
}
},
onClear: function () {
this.setData({
output: '',
input: '',
history: [],
});
},
});
```
在这个代码中,我们使用了三个按钮:一个用于计算,一个用于清除输入框和输出框的内容,另一个用于清除历史记录。
当用户点击“计算”按钮时,我们将用户输入的内容作为 JavaScript 代码进行计算,并将计算结果显示在输出框中。同时,我们也将计算过程保存在历史记录中。
当用户点击“清零”按钮时,我们将输入框、输出框和历史记录全部清空。
希望这个代码能对你有所帮助!
阅读全文