输入、按钮与输出

要求：输入长和宽后点击按钮计算长方形的周长和面积

效果展示

快速生成代码

1
2
<!-- index.wxml -->
.box>(.title{求长方形的周长面积}+(.w>input[type="digit" placeholder="请输入长方形的长" bindblur="getL"])+(.h>input[type="digit" placeholder="请输入长方形的宽" bindblur="getW"])+.wv{长方形的周长为：{{C}}}+.hv{长方形的面积为：{{S}}}+.sub>button[type="primary" bindtap="submit"]{提交})

标签

1
2
3
4
5
6
7
8
9
<!-- index.wxml -->
<view class="box">
  <view class="title">求长方形的周长面积</view>
  <view class="w"><input type="digit" placeholder="请输入长方形的长" bindblur="getL"/></view>
  <view class="h"><input type="digit" placeholder="请输入长方形的宽" bindblur="getW"/></view>
  <view class="wv">长方形的周长为：{{C}}</view>
  <view class="hv">长方形的面积为：{{S}}</view>
  <view class="sub"><button type="primary" bindtap="submit">提交</button></view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* index.wxss */
view {
  margin: 10px 0;
}

.box {
  margin: 10px auto;
  padding: 10px;
  width: 90%;
  border: 1px solid #0003;
}

.box .title {
  margin: 0;
  text-align: center;
  font-size: 26px;
  color: red;
}

.box input {
  margin: 10px 0 20px;
  border-bottom: 2px solid #00f6;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// index.js
// 获取应用实例
const app = getApp()

var L = 0;
var W = 0;

Page({
  data: {
    C: '',
    S: '',
  },
  getL: function(e) {
    L = Number(e.detail.value)
  },
  getW: function(e) {
    W = Number(e.detail.value)
  },
  submit: function() {
    var C = (L + W) * 2 // 周长
    var S = L * W // 面积
    if(C < 0 || S < 0) {
        C = "不存在的周长"
        S = "不存在的面积"
    }
    this.setData({
      C: C,
      S: S
    })
  }
})