微信小程序开发 3-7 教案-实现分段函数[4页]

第3章小程序视图层任务3.7 实现分段函数
valueOf()返回Math对象的原始值
三、实现效果
根据案例描述可以做出如图3.13所示的效果。

当x=-100时，计算出的y=100，如图（a）所示。

当x=11.5时，计算出的y=1520.875，如图（b）所示。

当x=22.5时，计算出的y=149.4487,如图（c）所示。

（a）x=-2021时（b）x=8时（c）x=33时
图3.13 条件语句和数学函数案例运行效果
四、任务实现
1.编写index.wxml文件代码
代码主要包括input组件，并利用该组件绑定了calc函数，并为input组件设置了下边框线和边距的样式。

index.wxml文件：
<!--index.wxml-->
<view class="box">
<view class="title">实现分段函数</view>
<view>
<input placeholder="请输入x的值" bindblur="calc"></input>
</view>
<view>计算y的值为：{{y}}</view>
</view>
2.编写index.wxss文件代码
文件定义了input样式，该样式适用于所有input组件。

index.wxss文件见附件；
3.编写index.js文件代码
文件定义了calc函数，该函数根据x的值，利用条件语句和数学函数计算出了y的值，并通过setData函数将计算结果渲染到视图层。

index.js文件：
// index.js
Page({
//自定义函数calc
calc:function(event){
var x,y;//定义局部变量x和y
var x=event.detail.value;//获取input组件的value值并赋值给x
if(x<0){//根据x值进行判断，并求出y的值
y=Math.abs(x);
}else if(x<10){
y=Math.exp(x)*Math.sin(x);
}else{。