4、条件语句和数学函数

1. 视图层设计

<!--index.wxml-->
<view class="box">
  <view class="title">条件语句和数学函数</view>
  <view>
    <input placeholder="请输入x的值" bindblur="calc"></input>
  </view>
  <view class="text1">计算y的值为：{{y}}</view>
</view>

2. 样式层设计

/**index.wxss**/
.box{
  width: auto;
  height: auto;
  border: 1px solid black;
  margin: 20px 10px;
}
.title{
  margin: 20px 10px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
  color:red;
}
input{
  margin: 20px 10px;
  border-bottom: 1px solid black;
}
.text1{
  margin: 10px 10px;
}

3. 逻辑层设计

// index.js
Page({
  calc:function(e){
    //定义局部变量x,y
    var x,y;
    //获取input组件value的值并且赋值给x
    x=e.detail.value;
    if(x<0){
      y=Math.abs(x);
    }else if(x<10){
      y=Math.exp(x)*Math.sin(x);
    }else if(x<30){
      y=Math.pow(x,3);
    }else{
      y=(3+2*x)*Math.log(x);
    }
    this.setData({
      //将局部变量y赋值给绑定变量y
      y:y
    })
  }
})

4. 模拟器演示

- 总结

• 条件语句
  
  
  
  
• Math对象属性
  
  
• 错题记录