微信小程序案例一 成绩计算

微信小程序案例一 ：成绩计算

1. 效果图
   

---

2.WXML文件

属性 bindinput 的类型为 handlerEvent 除了date/time 类型的输入框，当键盘输入时触发 input 事件，e.detail = {value:value} 除了函数可以直接 return 一个字符串，替换input中的内容。

<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='time'></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'>评价分:{{avrage}}</view>
</view>

---

3 WXSS 文件

page{
  background: #f1f0f6
}

.placeholder{
  font-size: 15px;
}

input{
  background: #fff;
  height: 120rpx;
  margin-bottom: 1px;
  padding-left: 8px;
}

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

---

4 WXJS 文件

// pages/case1/case1.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;

      this.setData({
        avrage : avg,
        flag: false
      });
    }


  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

参考地址：http://www.51zxw.net/show.aspx?id=66808&cid=657