编写一个小程序页面显示你的真实姓名,班级,学号,并且显示一个按钮,按钮文字是“显示结果” ,点击按钮,弹出一行文字: 统计出我的学号中包含数字1的个数是:? 使用微信小程序开发计算出个数并替换上句话里的问号
时间: 2024-10-11 13:08:44 浏览: 6
在微信小程序中创建这个页面,你需要先导入必要的组件,如`view`, `button`, 和 `wx:if` 来动态显示计数。以下是一个简单的示例代码:
```html
<!-- index.wxml -->
<view class="container">
<view>
<text>{{ realName }}</text>
<text>班级: {{ className }}</text>
<text>学号: {{ studentId }}</text>
</view>
<button open-type="primary" onclick="countOne">显示结果</button>
<view wx:if="{{ displayCount }}" style="display: none;">
统计出我的学号中包含数字1的个数是:{{ count }}
</view>
</view>
```
```javascript
// index.js
Page({
data: {
realName: '真实姓名', // 这里填写你的姓名
className: '班级名称', // 这里填写你的班级
studentId: '123456', // 这里填写你的学号
count: 0,
displayCount: false,
},
countOne: function() {
let str = this.data.studentId;
let count = (str.match(/\d/g) || []).filter(num => num === '1').length;
if (count > 0) {
this.setData({
count: count,
displayCount: true, // 显示计数部分
});
} else {
Toast('学号中不包含数字1');
}
},
})
```
在这个示例中,当你点击“显示结果”按钮时,会调用 `countOne` 函数,检查学号中1的数量,并更新页面内容。如果存在,则显示计数,否则给出提示。