微信小程序现实两数相加
时间: 2023-05-30 10:04:39 浏览: 899
这是一个简单的微信小程序,实现了两个数字相加的功能。
代码如下:
index.wxml:
```
<view class="container">
<view class="title">
两数相加
</view>
<view class="input-container">
<text class="input-label">数字1:</text>
<input class="input" type="number" bindinput="onInput1" />
</view>
<view class="input-container">
<text class="input-label">数字2:</text>
<input class="input" type="number" bindinput="onInput2" />
</view>
<view class="result-container" wx:if="{{result}}">
<text class="result-label">结果:</text>
<text class="result">{{result}}</text>
</view>
</view>
```
index.wxss:
```
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
}
.input-container {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.input-label {
font-size: 18px;
margin-right: 10px;
}
.input {
width: 100px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 10px;
}
.result-container {
display: flex;
flex-direction: row;
align-items: center;
}
.result-label {
font-size: 18px;
margin-right: 10px;
}
.result {
font-size: 18px;
font-weight: bold;
}
```
index.js:
```
Page({
data: {
num1: 0,
num2: 0,
result: 0,
},
onInput1(event) {
this.setData({
num1: parseInt(event.detail.value),
});
},
onInput2(event) {
this.setData({
num2: parseInt(event.detail.value),
});
},
calculate() {
const { num1, num2 } = this.data;
const result = num1 + num2;
this.setData({
result,
});
},
});
```
效果如下:
![image](https://user-images.githubusercontent.com/18772821/126727854-cd1284d9-9cd8-4c1b-85c0-7f1e1e8de7e0.png)
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)