【小程序】流程控制结构

1. if...else

和c++一模一样，不多说。函数部分是之前实践过的。

cal:function(e){
    var x,y;
    x=e.detail.value;
    if(x<0){
      y=Math.abs(x);
    }
    else if (x>=0 && x<10){
      y=Math.exp(x)*Math.sin(x);
    }
    else if (x>=10 && x<20){
      y=Math.pow(x,3);
    }
    else{
      y=(3+2*x)*Math.log(x);
    }
    this.setData({y});
  }

2. 学生成绩计算器

实现一个计算器，用户输入姓名，语文成绩，数学成绩，点击提交后在提交按钮下显示出用户的姓名和平均分。

隐藏一个段落可以用属性组件hidden，值为false则显示，为true则隐藏。

另外e.detail.value默认为char属性，需要*1转化为数字类型。

主体代码如下：

<view class="box">
  <view class="title">
    均分计算器
  </view>
  <view >
    <input type="text" placeholder="请输入姓名"class="input_style" bindinput="getname"/>
    <input type="digit" placeholder="请输入语文成绩"class="input_style" bindinput="getch_s"/>
    <input type="digit" placeholder="请输入数学成绩"class="input_style" bindinput="getma_s"/>
  </view>
  <button bindtap="mysubmit" class="button_style">提交</button>
  <view hidden="{{flag}}" class="hide_style">
    <view>
      姓名：{{m_name}}
    </view>
    <view>
      平均分：{{av_s}}
    </view>
  </view>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    flag:true,
    m_name:'',
    av_s:-1,
    ch_s:-1,
    ma_s:-1,
  },
  getname:function(e){
    this.setData({
      m_name:e.detail.value
    });
  },
  getch_s:function(e){
    this.setData({
      ch_s:e.detail.value
    });
  },
  getma_s:function(e){
    this.setData({
      ma_s:e.detail.value
    });
  },
  mysubmit:function(e){
    if(this.data.ch_s!=-1 && this.data.ma_s!=-1 & this.data.m_name!=''){
      this.setData({
        flag:false
      });
      this.setData({
        av_s:(this.data.ch_s*1+this.data.ma_s*1)/2
      });
    }
  },
})

3. for/while/do...while循环

本质上语法和c++的一模一样，看一看可过。

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    beginnum:'',
    endnum:'',
    r:'',
    flag:true,
  },
  getbegin:function(e){
    this.setData({
      beginnum:e.detail.value
    })
  },
  getend:function(e){
    this.setData({
      endnum:e.detail.value
    })
  },
  mysubmit:function(e){
    if(this.data.beginnum!='' && this.data.endnum!=''){
      this.setData({
        flag:false
      });
      var tempnum=0;
      for(var i=this.data.beginnum;i<=this.data.endnum;i++){
        tempnum+=i*1;
      }
      this.setData({
        r:tempnum
      });
    }
  },
})

4. 随机数生成并求和

随机数生成函数为：Math.random()，在函数后*100代表生成的随机数在0-100之间，生成数后变为number对象，.toFixed(2)代表保留2位。此时为字符串对象，作为数字进行运算需要额外*1

在page外可定义全局变量。但是全局变量为了显示在页面上，以rand为例，需要在执行时额外写上this.setdata({rand:rand})

另外，通过console.log(tempnum)可将数值显示在控制台，方便debug

// index.js
// 获取应用实例
const app = getApp()
var rand,sum;
function getrand(){
  rand=[];
  sum=0;
  for(var i=0;i<6;i++){
    var tempnum=(Math.random()*100).toFixed(2);
    rand.push(tempnum);
    sum+=tempnum*1;
    console.log(tempnum);
  }
  console.log(sum);
}
Page({
  data: {
    flag:true,
  },
  mysubmit(e){
    getrand();
    this.setData({
      flag:false
    });
    this.setData({
      rand:rand
    })
    this.setData({
      sum:sum
    })
  }
})

5. 计时器

要求生成计时器，可以显示剩余多少时间，按start开始计时，按end或时间为0时结束计时。

几个新函数：

setTimeout(()=>{that.show()},2000);//在2000ms后执行show()函数

numid=setInterval(()=>{that.countnum()},1000);//每隔1000ms执行一次countnum()函数，返回值为该计时器的id

clearInterval(numid);//清除numid，即清除该计时器。

需要注意的：

ifcon标记用来表示是否跳出start()函数，如果一直为true将一直执行setInterval函数，不会跳出，大函数也不会结束。

// index.js
// 获取应用实例
const app = getApp()
var numid;
var ifcon=true;
Page({
  data: {
    flag:true,
    num:60,
  },
  onLoad: function (options) {

    var that = this;

    setTimeout(() => {

      that.show()

    }, 2000) //2秒钟后显示计时界面

  },



  show: function () { //显示计时界面函数

    var that = this;

    that.setData({

      flag: false //显示计时界面

    });

  },
  
  start:function(){
    if(ifcon){
    var that=this;
    numid=setInterval(()=>{
      that.counttime()
    },1000);}
    ifcon=false;
  },
  counttime:function(){
    if(this.data.num>0){
      this.setData({num:this.data.num-1});
    }
  },
  end:function(){
    ifcon=true;
    clearInterval(numid);
  },
})

6. 随机生成三色旗

要求每隔5000ms切换一次颜色，三部分颜色随机生成。

时间间隔还是用setInterval()函数。math.floor()代表对数字进行向下取整。

需要注意：指定颜色之前，需要设置好框的长宽，否则不予显示。试了好多次才发现是没设置框的长宽而导致旗子显示不出来。

<view class="box">
  <view class="title">
    变化的三色旗
  </view>
  <view class="myview">
    <view class="item" style="background-color: {{color1}}"></view>
    <view class="item" style="background-color: {{color2}}"></view>
    <view class="item" style="background-color: {{color3}}"></view>
  </view>
</view>

.myview{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  border: brown solid 1rpx;
}
.item{
  height:500rpx;
  width:300rpx
}

// index.js
// 获取应用实例
const app = getApp()
var color=[];
Page({
  data: {
    color1:'',
    color2:'',
    color3:'',
  },
  show:function(){
    color=[];
    var tempcolor="123456789ABCDEF";
    for(var i=0;i<3;i++){
      var tempstring="#";
      for(var j=0;j<6;j++){
        tempstring+=tempcolor[Math.floor(Math.random()*15)];
      }
      color.push(tempstring);
    }
    this.setData({
      color1:color[0],
      color2:color[1],
      color3:color[2],
    })
    console.log(color);
  },
  onLoad(options){
    this.show();
    setInterval(()=>{
      this.show();
    },5000);
  }
})