微信小程序利息计算器
桃豆豆 人气:0一、案例说明
设计一个小程序,输入本金、利率,默认本金10000元、利率3%,计算存入银行,复利计息情况下五年后得到多少钱?(每过1年,将本金和利息相加作为新的本金)(使用for循环实现)
二、案例代码
1) index.xml文件
<!--index.wxml--> <image src="/image/lixi.png" style="width: 750rpx; height: 435rpx; display: inline-block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"></image> <view class="box"> <view class="title">利息计算机</view> <view> <input placeholder="请输入本金" type="number" bindblur="moneyNum"></input> <input placeholder="请输入利率" type="number" bindblur="lilvNum"></input> </view> <button type="primary" bindtap="calc">总金额</button> </view> <view class="box1"> <view>五年后总金额为:{{sum}}</view> </view>
2)index.wxss文件
/**index.wxss**/ input{ border-bottom: 1px solid blue; margin: 20px 0; } button{ margin-top: 20px; color: aqua; }
3)index.js文件
// index.js var money,lilv,sum; Page({ moneyNum:function(e){ money=parseInt(e.detail.value); }, lilvNum:function(e){ lilv=parseInt(e.detail.value); }, calc:function(){ for(var i=1;i<=5;i++){ money*=(1+lilv/100) } this.setData({ sum:money }) } })
注意:lilvNum函数用来获取利率值,但是利用的是parseInt(),获取的是int型数值,所以在程序输入利率时要输入整数型,例如:3或者3%,而不能输入:0.03。
三、效果图
四、分析总结
在index.wxml文件中,定义了两个input组件和一个button组件,设置input组件的bindblur属性绑定失去焦点的事件函数来获取组件的value值,设置button组件的bindtap属性绑定点击按钮的事件函数来进行求和计算。在index.js文件中分别对其三个事件函数进行定义和具体编写,通过this.setData()方法将结果渲染到视图层。
在编写calc函数中,主要利用了for循环。
加载全部内容