设计一个计算学生平均成绩的小程序。当输入学生信息和各门功课成绩并提交后，能够显示学生的信息及平均成绩。

1.index.wxml

<view class='box'>
  <view class='title'>成绩计算器</view>
  <input placeholder="请输入你的名字" placeholder-class="placeholder" bindinput="nameInput"></input><!--bindinput事件绑定-->
  <input placeholder="请输入语文成绩" placeholder-class="placeholder" bindinput="chineseInput" type="number"></input><!--type="number":整数，弹出无小数点的整数键盘-->
  <input placeholder="请输入数学成绩" placeholder-class="placeholder" bindinput="mathInput" type="number"></input>
  <button bindtap="mysubmit">提交</button>
  <view hidden="{{flag}}" class="content">
    <view class="content-item">姓名：{{name}}</view>
    <view class="content-item">语文成绩：{{chinese_score}}</view>
    <view class="content-item">数学成绩：{{math_score}}</view>
    <view class="content-item">平均分：{{average}}</view>
  </view>
</view>

2.index.wxss

page {
  background: #f1f0f6
}

.placeholder {
  font-size: 15px;
  /*占位符*/
}

input {
  background: #fff;
  height: 120rpx;
  margin: 10px;
  padding-left: 8px;
  /*左内边距*/
  border: solid 1px silver;
}

button {
  margin: 30rpx 50rpx;
  background-color: red;
  color: white;/*文本颜色*/
}

.content {
  background: #fff;
  padding: 10px;
color: #f00;
}
.content-item{
  padding: 3rpx;
  font-size: 16px;
  line-height: 30px;
}

3.index.js

Page({
data:{
  flag:true,//不显示
  name:'',//为空
  chinese_score:'',
  math_score:'',
  avrage:''
},
nameInput:function(e){
  this.setData({
    name:e.detail.value//赋值
  });
},
chineaeInput:function(e)
{
  this.setData({
    chinese_score:DataTransferItemList.value
  });
},
mathInput:function(e){
  this.setData({
    math_score:e.detail.value
  });
},
mysubmit：function(){
  if(this.data.name==''||this.data.chinese_score==''||this.data.math_score==''){
    return;//若有空则返回
  }else{
    var avg=(this.data.chinese_score*1+this.data.math_score*1)/2;//输入时是字符型，*1后转变为数值
    this.setData({
      flag:false,//显示
      avrage:avg,
    });
  }
}
})

4.总结

1.javascript中的逻辑运算符

运算符	描述
&&	and
||	or
!	not

2.button组件

属性	说明
size	按钮的大小
type	按钮的类型
plain	按钮是否镂空，背景色是否透明
disabled	是否禁用
loading	是否带loading图标
form-type	用于<form>组件的提交或设置

属性合法值

属性	合法值	说明
size	default	默认大小
	mini	小尺寸
type	primary	绿色
	default	白色
	warn	红色
form-type	submit	提交表单
	reset	重置表单