(1)json{ "navigationBarTitleText": "成绩平均分计算器"}(2)xml<view class="container"> <!-- 输入框 --> <view class="input-group"> <text>语文成绩:</text> <input type="digit" bindinput="inputChinese" placeholder="请输入语文成绩" /> </view> <view class="input-group"> <text>数学成绩:</text> <input type="digit" bindinput="inputMath" placeholder="请输入数学成绩" /> </view> <view class="input-group"> <text>英语成绩:</text> <input type="digit" bindinput="inputEnglish" placeholder="请输入英语成绩" /> </view> <!-- 计算按钮 --> <button class="calc-btn" bindtap="calcAverage">计算平均分</button> <!-- 结果显示 --> <view wx:if="{{showResult}}" class="result"> <text>平均分:{{average}} 分</text> <text>等级评定:{{level}}</text> </view></view>(3)css.container { padding: 30rpx;}.input-group { display: flex; align-items: center; margin-bottom: 30rpx;}.input-group text { width: 180rpx;}.input-group input { flex: 1; border: 1rpx solid #ddd; padding: 10rpx 20rpx; border-radius: 8rpx;}.calc-btn { background-color: #2E8B57; color: #fff; margin: 40rpx 0;}.result { margin-top: 20rpx; font-size: 32rpx; line-height: 60rpx;}(4)jsPage({ data: { chinese: 0, math: 0, english: 0, average: 0, level: '', showResult: false }, // 输入语文成绩 inputChinese(e) { this.setData({ chinese: Number(e.detail.value) || 0 }) }, // 输入数学成绩 inputMath(e) { this.setData({ math: Number(e.detail.value) || 0 }) }, // 输入英语成绩 inputEnglish(e) { this.setData({ english: Number(e.detail.value) || 0 }) }, // 计算平均分与等级 calcAverage() { const { chinese, math, english } = this.data; const average = (chinese + math + english) / 3; let level = ''; if (average >= 90) { level = '优秀'; } else if (average >= 75) { level = '良好'; } else if (average >= 60) { level = '及格'; } else { level = '不及格'; } this.setData({ average: average.toFixed(2), // 保留两位小数 level, showResult: true }) }})
2026-04-29
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- [教程]微信小程序之试手豆瓣图书API,有demo有真相2016-10-13转载作者:oopsguy 最近微信小程...
- @微信小程序------用户登录界面练习(初次写博客,请大家多多包涵,多多指教) 经过对微信小程序的初步学习,大致...