1、案例要求：

• 制作一个可以通过两个输入数字求和的页面

2、制作流程：

2.1、代码实现：

wxml:

<view class="box">
    <view class="title">两数之间求和器</view>
    <input placeholder="区间开始的数字" type="digit" bindblur="star" />
    <input placeholder="区间结束的数字" type="digit" bindblur="end" />
    <view >
    结果是：{{sum}}
    </view>
    <button class="butt" bindtap="sum" type="primary">求和</button>
</view>

js（用局部变量和页面变量的方法）:

// pages/dem_2/dem_2.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        sm:0,
        star:0,
        end:0
    },
   star:function(e){
       console.log(e)
    this.data.star = parseInt(e.detail.value);
   },
   end:function(e){
    this.data.end = parseInt(e.detail.value);
   },
   sum:function(){
       var sum = 0;
    for(var i = this.data.star; i <= this.data.end; i++){
        sum = sum + i;
    }
    this.setData({
        sum : sum
    })
   }
})

js（用全局变量和页面变量的方法）:

// pages/dem_2/dem_2.js
var star,end,sum = 0;
Page({
   star:function(e){
       console.log(e)
    star = parseInt(e.detail.value);
   },
   end:function(e){
    end = parseInt(e.detail.value);
   },
   sum:function(){
    for(var i = star; i <= end; i++){
        sum = sum + i;
    }
    this.setData({
        sum : sum
    })
   }
})

2.2、结果展示：

3、知识总结：

知识总览.jpg 循环类型.jpg for循环案例.jpg for_in循环案例.jpg while循环案例.jpg do_while循环案例.jpg 全局变量的使用.jpg js的全局对象.jpg

4、踩坑说明：

• e.detail.value写成e.detail.data，排错的时候如果不注释掉e.detail.data，容易找不出错误
• input当中输入的数字都是字符值，要转换成数值整型，可以用parseInt（）函数。
  parse [pɑːz]
  vt.(对句子)作语法分析;作句法分析
• 设定全局变量的方法：在js中Page的上面用var定义即可。