1、效果展示
2、布局文件
<input bindinput="inputName" placeholder="请输入姓名" placeholder-class="placeholder"></input>
<input bindinput="inputChinese" placeholder="请输入语文成绩" placeholder-class="placeholder"></input>
<input bindinput="inputMath" placeholder="请输入数学成绩" placeholder-class="placeholder"></input>
<input bindinput="inputEnglish" placeholder="请输入英语成绩" placeholder-class="placeholder"></input>
<button bindtap="report" type="primary">提交</button>
<view class="content" hidden="{{isHidden}}">
<view class="content-item">姓名:{{name}}</view>
<view class="content-item">语文:{{chineseScore}}</view>
<view class="content-item">数学:{{mathScore}}</view>
<view class="content-item">英语:{{englishScore}}</view>
<view class="content-item">平均:{{avgScore}}</view>
</view>
3、格式文件
/* pages/test/test.wxss */
/* 整体页面 */
page{
background: #f1f0f6;
}
/* 自定义的属性 */
.placeholder{
font-size: 15 rpx;
}
/* input 输入格式 */
input{
background-color: #fff;
height: 100rpx;
margin-bottom: 1px;
padding-left: 20rpx;
}
/* button 输入格式 */
button{
margin: 30rpx 50rpx;
}
.content{
background: white;
}
.content-item{
padding: 5px;
}
3、逻辑文件
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
name:"",
chineseScore:"",
mathScore:"",
englishScore:"",
avgScore:"",
isHidden:true
},
inputName:function(e) {
var inputname = e.detail.value;
this.setData({
name:inputname
});
},
inputChinese:function(e) {
var inputchinese = e.detail.value;
//判断是不是 数字
if (!isNaN(inputchinese)) {
console.log("input chinese");
this.setData({
chineseScore:inputchinese
});
}
},
inputMath:function(e) {
var inputMath = e.detail.value;
if (!isNaN(inputMath)) {
this.setData({
mathScore:inputMath
});
}
console.log("input math")
},
inputEnglish:function(e) {
var inputEnglish = e.detail.value;
if (!isNaN(inputEnglish)) {
this.setData({
englishScore:inputEnglish
});
}
},
report:function() {
console.log("report");
if(this.data.name=="" || this.data.chineseScore=="" ||
this.data.mathScore=="" || this.data.englishScore=="") {
this.data.isHidden = true;
return;
}
var avg = ((this.data.chineseScore*1) + (this.data.mathScore*1) + (this.data.englishScore*1)) /3;
this.setData({
isHidden: false,
//设置平均数，并且保留小数后两位
avgScore:avg.toFixed(2)
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
