小程序制作（超详解！！！）第十二节 循环求和计算器

1.index.wxml

<view class="box">
  <view class="title">利用循环语句求和</view>
  <view>
    <input placeholder="请输入起点数值" type="number" bindblur="starNum"></input>
    <!--一旦失去交点调用starNum-->
    <input placeholder="请输入终点数值" type="number" bindblur="endNum"></input>
    <!--一旦失去交点调用endNum-->
  </view>
  <view>两个数之间的和为：{{sum}}</view>
  <button type="primary" bindtap="calc">求和</button>
</view>

2.index.wxss

input {
  margin: 20px 0;
  border-bottom: 1px solid blue;
  /*下边框粗细为1px、实心、蓝色*/
}
button{
  margin-top: 20px;/*上边距为20px*/
}

3.index.js

var start,end,sum;//定义全局变量
Page({
  startNum:function(e){
  start=parseInt(e.datail.value);//将value值转为整数并赋值
},
endNum:function(e){
  end=parseInt(e.datail.value);//将value值转为整数并赋值
},
calc:function(){
  sum=0;
  for(var i=start;i<=end;i++){//for循环求和
    sum=sum+i;
  }
  this.setData({
    sum:sum//将全局变量sum的值渲染到视图层
  })
}
})

4.总结

1.JavaScript中的循环语句

如果希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。JavaScript 支持的循环类型包括：

（1）for:多次遍历代码块

for(语句 1; 语句 2 语 3){

要执行的代码块

}
语句 1 在循环(代码块)开始前执行

语句 2 定义运行循环 (代码块) 的条件

语句 3 在循环 (代码块) 已被执行之后执行

（2）for/in:遍历对象属性

样例：

（3）while:当指定条件为 true 时循环一段代码块

while(条件）{

要执行的代码块

}

样例：

（4）do/while:当指定条件为 true 时循环一段代码块

do{

要执行的代码块

}while(条件）；

样例：

2.JavaScript的全局对象