6、循环求和计算器

6、循环求和计算器

- 视图层设计

<view class="box">
  <view class="title">利用循环语句求和</view>
  <view>
    <input placeholder="请输入起点的数值" type="number" bindinput="startNum"></input>
    <input placeholder="请输入终点的数值" type="number" bindinput="endNum"></input>
  </view>
  <view class="text1">两个数之间的和为：{{sum}}</view>
  <button type="primary" bindtap="calc">求和</button>
</view>

- 样式层设计

.box{
  width: auto;
  height: auto;
  border: 1px solid black;
  margin: 20px 10px;
}
.title{
  margin: 20px 10px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
  color:red;
}
input{
  background-color: white;
  height: 120rpx;
  margin: 10px;
  padding-left: 10px;
  border:1px solid slategrey;
}
.text1{
  margin: 20px 13px;
}
button{
  margin: 10px auto;
}

- 逻辑层设计

//定义起点数、终点数、求和结果三个全局变量
var start,end,sum;
Page({
  startNum:function(e){
    start=parseInt(e.detail.value);
  },
  endNum:function(e){
    end=parseInt(e.detail.value);
  },
  calc:function(e){
    sum=0;//初始化sum的数值为0
    for(var i=start;i<=end;i++){
      sum=sum+i;//利用for循环求和
    }
    this.setData({
      sum:sum //将全局变量中的sum值渲染到视图层中 
    })
  }
})

- 模拟器演示

• JavaScript中循环语句
  
  
  
  
  - JavaScript全局对象