小程序编程基础（四）

小程序编程基础（四）

一、随机数求和

1.知识点

（1）JavaScript中Array对象函数的使用方法。

（2）JavaScript中Number对象函数的使用方法。

2.实现方法

JavaScript中的对象包括：字符串、数字、数组、日期等等。对象是拥有属性和方法的数据，属性是静态数据，方法是能够在对象上执行的动作，即动态数据。

2.1 JavaScript中的Array对象

用于在单个的变量中存储多个值，其常用属性和方法如下表所示。

属性和方法	说明
length	设置或返回数组中元素的数目
concat()	连接两个或更多的数组，并返回结果
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔字符进行分隔
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
reverse()	颠倒数组中的元素顺序
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
spice()	删除元素，并向数组添加新元素
toSource()	返回对象的源代码
toString()	把数组转化为字符串，并返回结果
toLocalString()	把数组转换为本地数组，并返回结果
unshift()	把数组的开头添加一个或更多元素，并返回新的元素
valueOf()	返回数组对象的原始值

2.2 JavaScript中的Number对象

属性和方法	说明
MAX_VALUE	可表示的最大的数
MIN_VALUE	可表示的最小的数
NaN	非数字值
NEGATIVE_INFINITY	负无穷大，溢出时返回该值
POSITIVE_INFINITY	正无穷大，溢出时返回该值
toString（）	把数字转换为字符串，使用指定的基数
toLocaleString（）	把数字转换为字符串，使用本地数字格式顺序
toFixed（）	把数字转换为字符串，结果的小数点后有指定位数的数字
toExponential（）	把对象的值转换为指数计数法
toPrecision（）	把数字格式化为指定的长度
valueOf（）	返回一个Number对象的基本数字值

3.案例分析

3.1案例描述

设计一个小程序，运行后产生一列100以内的随机数（保留小数点后2位），并显示这些随机数的和；当点击“产生新的随机数”按钮时，产生一列新的随机数，并显示这些随机数的和。

3.2实现效果

图1 随机数求和

3.3案例实现

3.3.1编写index.wxml文件代码

代码主要通过列表渲染的方法将逻辑层产生的随机数列表显示在屏幕，并显示随机数列的和，最下面添加一个按钮，用于绑定产生新的随机数的时间函数。

<view class="box">
  <view class="title">随机数求和</view>
  <view>产生的随机数列为：</view>
  <view wx:for="{{rand}}">{{item}}</view>
  <view>随机数列的和为：{{sum1}}</view>
  <button type="primary" bindtap="newRand">产生新的随机数</button>
</view>

3.3.2编写index.js文件代码

代码中主要包含了全局变量和全局函数的定义，并在Page函数中定义了onLoad函数和newRand函数。

（1）全局变量的定义。首先定义一个全局数组变量rand和一个全局普通变量sum1，rand用来存储产生的随机数列，sum1用来存储随机数列的和。

（2）全局函数的定义。定义creatRand（）函数用于生产随机数列并求和，该函数首先利用for循环产生6个随机数并将这些数据添加到数组中。Math.random()函数用于生产0-1之间的随机数，Math.random()*100能够产生0~100之间的随机数，toFixed（2）函数用于实现将产生的随机数保留小数点后2位，乘1的目的是将产生的随机数字符串转换为数值类型。

（3）rand.push（r）用于将产生的随机数r添加到rand数组中。

（4）console.log(sum)函数用于在控制台显示sum数据，这种方法对程序调试很有帮助。

（5）在onLoad（）和newRand（）方法中调用createRand（）方法产生随机数列并求和，然后通过this.setData（）方法将结果渲染到视图层。

var rand,sum1;                              //定义全局变量
function createRand(){
  rand=[];                                  //初始化数组变量
  sum1=0;                                   //初始化sum变量
  for(var i=0;i<6;i++){
    var r=(Math.random()*100).toFixed(2)*1; //产生100以内的保留小数点后2位的随机数并转换为数值类型
    rand.push(r);                           //将产生的随机数添加到数组中
    sum1+=rand[i];                          //随机数列求和
    console.log(rand[i]);                   //在控制台显示数组元素
  }
  console.log(sum1);
};
Page({
  onLoad:function(){
    createRand（）;                         //调用产生随机数的全局函数
    this.setData({
      sum1:sum1
    })
  },
  newRand:function(){  
    createRand();                          //调用产生随机数的全局函数
    this.setData({
      rand:rand,
      sum1:sum1
    })
  }
})

二、计时器

1.知识点

（1）函数number setTimeout(function callback,number delay,any rest)的使用方法

（2）函数number setInterval(function callback,number delay,any rest)的使用方法

2.实现方法

（1）函数number setTimeout(function callback,number delay,any rest)。设定一个定时器，在定时到期以后执行注册的回调函数。参数callback为回调函数，参数delay为延迟的时间，函数的调用会在该延迟之后发生，单位为ms。参数rest，param1，param2，…，paramN等为附加参数，他们会作为参数传递给回调函数。返回值number为定时器的编号。这个值可以传递给clearTimeout来取消该定时。

（2）函数函数number setInterval(function callback,number delay,any rest)。设定一个定时器，按照指定的周期（以ms计）来执行注册的回调函数。参数callback为回调函数，参数delay为执行回调函数之间的时间间隔，单位为ms。参数rest，param1，param2，…，paramN等为附加参数，他们会作为参数传递给回调函数。返回值number为定时器的编号。这个值可以传递给clearInterval来取消该定时。

（3）函数clealInterval(number intervalID)。取消由setInterval设置的定时器。参数intervalID为要取消的定时器的ID。

3.案例分析

3.1案例描述

设计一个实现倒计时功能的小程序，小程序运行后，首先显示空白页面，过2s后才显示计时界面，点击“开始计时”按钮后开始倒计时，此时“开始计时”按钮变为失效状态。点击“停止计时”按钮后停止计时，此时“开始计时”按钮变为可用状态。

3.2实现效果

图2 初始界面

图3 计时界面

3.3案例实现

3.3.1编写index.wxml文件代码

文件主要由计时器时数字系那是界面和2个按钮组成，计时数字显示界面布局和样式有.time样式来设置，2个按钮的布局由.btnLayout样式来设置，按钮的宽度由button样式设置。2个按钮分别绑定了start和stop函数来实现开始计时和停止计时。

<view class="box">
  <view class="title">计时器</view>
  <view class="time">{{num}}</view>
  <view class="btnLayout">
    <button bindtap="start" disabled="{{btnDisable}}">开始计时</button>
    <button bindtap="stop">停止计时</button>
  </view>
</view>

3.3.2编写index.wxss文件代码

button{
  width: 45%;
}
.time{
  width: 90%;
  line-height: 200rpx;
  background-color: #eef0dd;
  color: red;
  font-size: 100px;
  text-align: center;
  border: 1px solid silver;
  border-radius: 30px;
  margin: 15px;
}
.btnLayout{
  display: flex;
  flex-direction: row;
}

3.3.3编写index.js文件代码

文件定义了2个全局变量：num和timerID，定义了5个函数：onLoad、show、start、stop和timer。onLoad函数通过调用setTimeout函数，使计时页面在2s后显示；show函数用于显示计时器界面；start函数通过调用setInterval函数实现倒计时；stop函数通过调用clearInterval函数实现停止计时；timer函数用于实现计时过程。

var num=60;               //计时器显示的数字
var timerID;              //计时器ID
Page({
  data:{
    hidden:true,          //小程序运行时不显示计时桌面
   btnDisabled:false,      //设置“开始计时”按钮一开始是可用的
   num:num
  },
  onLoad:function(options){
    var that=this;
    setTimeout(()=>{
      that.show()
    },2000)               //2s后显示计时界面
  },
  show:function(){        //显示计时界面函数
    var that=this;
    that.setData({
      hidden:false
    })
  },
  start:function(){       //显示计时界面
    var that=this;
    that.setData({
      btnDisabled:true     //设置“开始计时”按钮不可用
    })
    timerID=setInterval(()=>{  
    that.timer()
    },1000)                //每隔1s调用一次timer函数
  },
  stop:function(){         //停止计时函数
    clearInterval(timerID) //清除计时器
    this.setData({         
      btnDisabled:false    //设置“开始计时”按钮可用
    })
  },
  timer:function(){        //计时函数
    var that=this;
    console.log(num)
    if(num>0){
      that.setData({
        num:num--          //每次减1
      })
    }else{
      that.setData({
        num:0
      })
    }
    console.log(num)
  }
})

4.思考

（1）setTimeout（）函数和setInterval（）函数有什么区别？

setTimeout()和setInterval()经常被用来处理延时和定时任务。使用setTimeout（）处理延时任务，而使用setInterval（）方法处理定时任务；

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到 clearInterval把它清除。

我们可以看到两个函数十分类似，只不过前者执行一次，而后者可以执行多次，两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数。

语法：
    setTimeout(function (){},time);  //time 毫秒之后执行
    setInterval(function (){},time)；//每隔time 毫秒执行