小程序笔记：EX210-学生成绩计算器

小程序笔记：EX210-学生成绩计算器

1. 效果展示
   
   

2. 代码

<view class='box'>
  <view class='title'>成绩计算器</view>
  <input placeholder="请输入你的名字" placeholder-class="placeholder" bindinput='nameInput'></input>
  <input placeholder="请输入语文成绩" placeholder-class="placeholder" bindinput='chineseInput' type='number'></input>
  <input placeholder="请输入数学成绩" placeholder-class="placeholder" bindinput='mathInput' type='number'></input>
  <button bindtap='mysubmit'>提交</button> <!-- bindinput聚焦时触发事件-->
  <view hidden='{{flag}}' class='content'>  <!-- hidden属性可以不渲染该模块-->
    <view class='content-item'>姓名:{{name}}</view>
    <view class='content-item'>语文成绩：{{chinese_score}}</view>
    <view class='content-item'>数学成绩:{{math_score}}</view>
    <view class='content-item'>平均分:{{avrage}}</view>
  </view>
</view> 

/* index.js */
Page({ /**
   * 页面的初始数据
   */ data: {
    flag: true,
    name: '',
    chinese_score: '',
    math_score: '',
    avrage: ''
  },
  nameInput: function (e) {
    this.setData({
      name: e.detail.value
    });
  },
  chineseInput: function (e) {
    this.setData({
      chinese_score: e.detail.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({
        avrage: avg, 
        flag: false
      });
    }
  }
})

/* 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;
}

.box{
  border: 1px solid silver;
  margin: 20rpx;
  padding: 20rpx;
}

.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: red;
}

• view中的hidden属性设置为ture可以不渲染该模块
• bindinput聚焦时触发事件
• ⚠️input组件默认输入数据为字符类型，需要根据需要转换为其他数值类型
• 引用变量的用法，{{}}表示
• js中的逻辑运算符

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

• button组件属性

属性	说明	合法值	说明
size	按钮大小	default/mini	默认/小尺寸
type	按钮类型	primary/default/warm	绿/白/红
plain	按钮是否镂空，北京颜色是否透明
disable	是否禁用
loading	是否带有loading标志
form-type	用于组件的提交或重置	submit/reset	提交表单/重置表单